K. Zakrzewski K. Zakrzewski - 3 months ago 17
CSS Question

How to change styles except ::before?

I want to change style of my

a
element by
::hover
but I dont want to change a
::before
element of it. How to avoid effect on
::before
? There is my code I've got.



header nav a {
width: 14%;
color: #fff;
text-align: center;
}
header nav a:before {
content: "\002D";
padding: 0px 40px;
}
header nav a:hover {
color: lime;
}

<header>
<nav>
<a href="">Home</a>
<a href="">About</a>
<a href="">Blog</a>
<a href="">Contact</a>
</nav>
</header>




Answer

just add color to :before content...

header nav a{
  width: 14%;
  color: #000;
  text-align: center;
}
header nav a:before{
  content: "\002D";
  padding: 0px 40px;
  color: #000
} 
header nav a:before:hover{
  color: #000
}
header nav a:hover{
        color: lime;
}
<header>
  <nav>
    <a href="">Home</a>
    <a href="">About</a>
    <a href="">Blog</a>
    <a href="">Contact</a>
  </nav>
</header>