CODEWITHSUNDEEP
htmlcsshover
K. Zakrzewski
K. Zakrzewski

Reputation: 59

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>

Upvotes: 1

Views: 42

Answers (1)

Mofarjul Molla
Mofarjul Molla

Reputation: 114

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>

Upvotes: 1

Related Questions