Underlining an html anchor with different color

Question

Is it possible to underline an anchor tag with a color other than its text color? Any example will be appreciated.

EDIT: Is it possible to specify color as hex e.g. #8f867c ?

Don't worry it's a valid question. I also don't know why somebody voted to close this. — Jan Hančič, May 07 '12 at 10:06
possible duplicate of [Changing link underline color](http://stackoverflow.com/questions/1175383/changing-a-link-underline-color) — Jukka K. Korpela, May 07 '12 at 10:11
Check this working link : [Link](http://jsfiddle.net/5s9UZ/) — swapnesh, May 07 '12 at 10:07

score 24 · Accepted Answer · answered May 07 '12 at 10:03

24

You cannot specify the underline color separately, but you can use a little trick:

a {
    color: red;
    text-decoration: none;
    border-bottom: 1px solid green;
}

Note that the border will not appear exactly where the underline would have appeared, sorry.

answered May 07 '12 at 10:03

Salman A

262,204
82
430
521

1

But be aware that if you create an anchor around an image, the image will get the dotted underline as well. This can become very annoying. – JohanB May 07 '12 at 10:06
Is it possible to give color as hex? e.g #8f867c – Umer Hayat May 07 '12 at 10:28

score 5 · Answer 2 · answered Apr 17 '21 at 04:45

5

CSS3 allows you to use text-decoration-color: #8f867c to set the color directly.

p {
  color: green;
  text-decoration: underline;
  text-decoration-color: #8f867c;
}

span {
  color: #8f867c;
}

<p>My underline is <span>#8f867c</span></p>

answered Apr 17 '21 at 04:45

Chad

2,161
1
19
18

score 3 · Answer 3 · answered May 07 '12 at 10:06

3

Assuming you want the "border" to only show when user moves his mouse over it you should do something like this:

a {
  text-decoration: none;
}

a:hover {
  border-bottom: 1px solid blue;
  text-decoration: none;
}

answered May 07 '12 at 10:06

Jan Hančič

53,269
16
95
99

The second `text-decoration` (the `:hover` one) is redundant. – sp00m May 07 '12 at 10:07
Not necessarily. He could have defined a "hover" state somewhere else that would have "text-decoration: underline" in-it. – Jan Hančič May 07 '12 at 10:08

sandeep · Answer 4 · 2012-05-07T10:20:10.090

2

It's better you can give border to it. write like this:

a{
text-decoration: none;
color:green;
border-bottom:1px solid red;
}

Check this http://jsfiddle.net/dgc4q/

edited May 07 '12 at 10:20

answered May 07 '12 at 10:04

sandeep

91,313
23
137
155

Frank N · Answer 5 · 2020-01-23T09:21:38.390

Is it possible to underline an anchor tag with a color other than its text color? Any example will be appreciated.

I find that weird, but I just learned: Yes, it is, if you wrap a span inside.

html:

<a href='#'><span>Howdy Partner</span></a>

css (sass)

html
  font-size: 6em

a
  color: red

span  
  color: green

little advantage over border-bottom-solution:

You are certainly not affecting base-line, line-height, margin collapse, spacing between lines... (depending on situtation, border-bottom could do that)

Underlining an html anchor with different color

5 Answers5

Linked