Home » Multiple underline colors in one anchor

Multiple underline colors in one anchor

Posted by: admin January 2, 2018 Leave a comment

Questions:

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.

Answers:

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>

Questions:
Answers:

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

Questions:
Answers:

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>

Questions:
Answers:

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>

Questions:
Answers:

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;
}

Questions:
Answers:

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>