CODEWITHSUNDEEP
htmlcss
Geraint
Geraint

Reputation: 3392

Multiple underline colors in one anchor

I would like to, within one anchor </a>, have two different underline colors. Like so:

<a href="somehref">
    <span>This text should underline RED on `a` hover</span>
    <span>This text should underline GREY on `a` hover</span>
</a>

I can add text-decoration to each span on hover but this causes each line to hover individually. I want it so that when I hover over anywhere in the </a> both spans underline with their font color inherited.

Is this possible?

Note: I'm aware of text-decoration-color but due to limit support I cannot use it.

Upvotes: 17

Views: 2924

Answers (6)

Pugazh
Pugazh

Reputation: 9561

Some thing like this? You can use the anchor's :hover CSS pseudo class to style it's child and descendant.

Here is an reference to CSS child and descendant selectors.

a {
  color: black;
  text-decoration: none;
}
a span:first-child {
  color: red;
}
a span:last-child {
  color: grey;
}
a:hover span {
  text-decoration: underline;
}
<a href="somehref">
  <span>This text should underline RED on `a` hover</span>
  <span>This text should underline GREY on `a` hover</span>
</a>

Upvotes: 19

Franck Dang
Franck Dang

Reputation: 5

there are a few ways to do it the best way is to create a class(in CSS) and set the color there the second way is to insert the CSS in the html code like here

.tool1:hover {
    background-color:red;
}
.tool2:hover {
    background-color:grey;
}
<!DOCTYPE html>
<html>
    <style>
    </style>
     
    <body style="text-align:center;">

        <p>Move the mouse over the text below:</p>

        <a href="somehref">
            <span class='tool1'>This text should underline RED on `a` hover</span>
            <span class='tool2'>This text should underline GREY on `a` hover</span>
        </a>

    </body>
</html>

Upvotes: -2

Rob Scott
Rob Scott

Reputation: 8049

I've added this to inherit the color of the span, which is what you wanted, rather than using the HEX in the underline. Note that this is SCSS.

CSS Color Module - 4.4. currentColor color keyword

CSS1 and CSS2 defined the initial value of the border-color property to be the value of the color property but did not define a corresponding keyword. This omission was recognized by SVG, and thus SVG 1.0 introduced the currentColor value for the fill, stroke, stop-color, flood-color, and lighting-color properties.

CSS3 extends the color value to include the currentColor keyword to allow its use with all properties that accept a value. This simplifies the definition of those properties in CSS3.

Fiddle for you

https://jsfiddle.net/4f0mL136/3/

<a href="somehref">
  <span>This text should underline RED on `a` hover</span>
  <span>This text should underline GREY on `a` hover</span>
</a>

a {
  text-decoration: none;
}

span:last-child {
  color: black;
}

span:first-child {
  color: red;
}

a:hover {
  span {
    border-bottom: 1px solid currentColor;
  }
}

span {  // display purposes
  display: block;
  border-bottom: 1px solid transparent;
  margin-bottom: 10px;
  transition: border-bottom .2s ease-in;
}

Upvotes: 4

Forty
Forty

Reputation: 325

Have you tried this?

a:hover span {
   text-decoration: underline; }

text-decoration: underline will inherit the font color automatically, so if your spans are already with gray/red colors, all you need to do is make them underline upon hovering the a

Upvotes: 6

Sree KS
Sree KS

Reputation: 1353

Try this

a{
	text-decoration:none;
}
a:hover #span1{
text-decoration: none;
border-bottom: 1px solid red;
}
a:hover #span2{
text-decoration: none;
border-bottom: 1px solid grey;
}
<a href="somehref">
    <span id="span1">This text should underline RED on `a` hover</span><br/>
    <span id="span2">This text should underline GREY on `a` hover</span>
</a>

Upvotes: 4

Sagar Kodte
Sagar Kodte

Reputation: 3815

You can also try this. if there are so many span element 

a{
  text-decoration:none;
}
a:hover span:nth-child(1){
  border-bottom:1px solid red;
}
a:hover span:nth-child(2){
  border-bottom:1px solid grey;
}
<a href="somehref">
    <span>This text should underline RED on `a` hover</span>
    <span>This text should underline GREY on `a` hover</span>
</a>

Upvotes: 5

Related Questions