A:hover and a:hover:after

HTML-CSS
1

I am trying to add a transition property to the a tags in my page. But I do not understand those syntax.
I found a similar page on codepen. Could someone explain these specific lines of code?

nav li a{
  display: block; 
  width: 100%; 
  padding: 20px; 
  border-left: 5px solid; 
  position: relative; 
  z-index: 2;
  text-decoration: none;
  color: #444;
  box-sizing: border-box;  
  -moz-box-sizing: border-box;  
  -webkit-box-sizing: border-box; 
}
	

/*set up the color of the left border*/
nav li a:hover{ border-bottom: 0px; color: #fff;}
nav li:first-child a{ border-left: 10px solid #3498db; }
nav li:nth-child(2) a{ border-left: 10px solid #ffd071; }
nav li:nth-child(3) a{ border-left: 10px solid #f0776c; }
nav li:last-child a{ border-left: 10px solid #1abc9c; }
/*?????*/
nav li a:after { 
  content: "";
  height: 100%; 
  left: 0; 
  top: 0; 
  width: 0px;  
  position: absolute; 
  transition: all 0.3s ease 0s; 
  -webkit-transition: all 0.3s ease 0s; 
  z-index: -1;
}


/*???*/
nav li a:hover:after{ width: 100%; }
nav li:first-child a:after{ background: #3498db; }
nav li:nth-child(2) a:after{ background: #ffd071; }
nav li:nth-child(3) a:after{ background: #f0776c; }
nav li:last-child a:after{ background: #1abc9c; }

So what I need are:

  1. a:hover
  2. a:after
  3. a:hover:after

but in the codepen the author did not put the new background-color into hover… why?

I want to create the same effect with all these buttons on my page, with the initial background-color: #eeeeee and at the hovering state I want the background color change to #23B6C7, and the text color change to white;

2

If you closely look at the css code in the example you want to achieve, you will see that the most important part in:

 nav li a:after { 
  content: "";
  height: 100%; 
  left: 0; 
  top: 0; 
  width: 0px;  
  position: absolute; 
  transition: all 0.3s ease 0s; 
  -webkit-transition: all 0.3s ease 0s; 
  z-index: -1;
}

and

nav li a:hover:after{ width: 100%; }

its width that grows from 0 to 100% and transition: all 0.3s ease 0s; that apply the effect

1 Like
3

I changed most of my code and now it has a background color “slides in” when you hover above it.
But I cannot change the color of the text inside the button.
I used a:hover{color:white;} just like in the working example, but it does not apply to the styling of the text.
why is that so?

4

This nav li a:hover{ border-bottom: 0px; color: #fff;} is the line that changes your font color.

5

I think this has something to do with z index. I am trying to find out how to solve this issue.

6

I did it.

need to set up 2 z-index s in my code.
thanks for the help!