CSS styling a link but not ::before content-CodePudding

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 >
        <a id="thelink" href="#">
    The Dash-Prefix should not be underlined when hovered
    </a>
    </span>

CodePudding user response：

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 >
        <a id="thelink" href="#">The Dash-Prefix should not be underlined when hovered</a>
    </span>
  <body>
</html>

CodePudding user response：

For people who do not want to solve by creating a pseudo-element, here is a solution for you:

https://codepen.io/louielyl/pen/YzeOYea

<!DOCTYPE html>
<html lang="en">
  <body>
    <ul>
      <a  href="https://codepen.io/louielyl/pen/YzeOYea">
        <li>Hover me and you will see the underline.</li>
      </a>
    </ul>
  </body>
</html>

.link{
  text-decoration:none;
}
.link:hover{
    text-decoration:underline;
}