CSS styling a link but not ::before content

Issue

Challenge: I would like to apply css styling ‘underlined’ to a link when hovered, but not to the content given by the css ::before selector. The goal is to underline the link text only, but not the ::before prefix when hovered.

It seems that the last styling line does not work:
.fontIcon a:hover::before { text-decoration: none; }
but when I specify e.g. some coloring, this does work.

Thanks for your hints.

a {
  text-decoration: none;
}

.fontIcon {
  font-family: 'Arial', bold;
}

.fontIcon:hover {
  text-decoration: underline;
}

.fontIcon a::before {
  content: "- ";
  text-decoration: none;
}

.fontIcon a:hover::before {
  text-decoration: none;
}
<h1>Challenge</h1>
<span class="fontIcon">
        <a id="thelink" href="#">
    The Dash-Prefix should not be underlined when hovered
    </a>
    </span>

Solution

a                   { text-decoration: none; }
.fontIcon           { font-family: 'Arial', bold; }
.fontIcon:hover     { text-decoration: underline; }
.fontIcon a::before { content: "- "; text-decoration: none; }
.fontIcon:hover a:before {
  display: inline-block;
  padding-right: 4px; /* optional */
 }
<html>
  <head>
  </head>
  <body>
    <h1>Challenge</h1>
    <span class="fontIcon">
        <a id="thelink" href="#">The Dash-Prefix should not be underlined when hovered</a>
    </span>
  <body>
</html>

Answered By – dita

Answer Checked By – Clifford M. (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.