Multiple Link Colors

HTML & CSS
1

Is it possible to have the link text be one color and the text-decoration be another color?

For example, Black text with a red underline?

Thanks.

2

Woudln’t a bottom border suffice? Assuming the link isn’t block level :slight_smile:

3

It actually is possible, if you do something like this:


<!DOCTYPE html>
<head>
<meta charset="utf-8">

<title>Experiment</title>
	
<style type="text/css">
   .underline {color:#ff0000; text-decoration: underline;}
    .text {color:#000000;}
</style>

</head>

<body>

<h1 class="underline"><span class="text">some text</span></h1> 

</body>
</html>

EDIT: or like this for a link:


<!DOCTYPE html>
<head>
<meta charset="utf-8">

<title>Experiment</title>
	
<style type="text/css">
    .underline {color:#f00; text-decoration: underline;}
    a {color:#000; text-decoration: none;}
    a:hover {color: #00f; text-decoration: none;}
</style>

</head>

<body>

<p class="underline"><a href="#">some text</a></p> 

</body>
</html>
4

I don’t think you can do that with text-decoration:underline, but instead you can have text-decoration:none and use e.g. border-bottom: 1px solid red to achieve the same effect. Might need to adjust the bottom padding to get it looking ok.