user3550879 user3550879 - 5 months ago 15
HTML Question

targeting :after element on hover

I want to target the

:after
element when I hover over the
#btn-home
button.

css

#btn-home a {
display: inline-block;
color: #707070;
font-size: 1.15em;
font-weight: 600;
margin: 0 20px;
}

#btn-home {
position: relative;
display: inline-block;
margin: 0;
}

#btn-home a:after {
display: block;
position: absolute;
content: '';
margin: 0 auto;
height: 3px; width: 25px;
background-color: red;
bottom: -7px; left: 0; right: 0;
}


I want to target the width of the
:after
element when hovered over
#btn-home


html

<div id="btn-home">
<a href="<?php echo get_home_url(); ?>">HOME</a>
</div>

Answer

That is pretty easy to do. Just use the selector as #btn-home:hover a:after.

#btn-home a {
  display: inline-block;
  color: #707070;
  font-size: 1.15em;
  font-weight: 600;
  margin: 0 20px;
}
#btn-home {
  position: relative;
  display: inline-block;
  margin: 0;
}
#btn-home a:after {
  display: block;
  position: absolute;
  content: '';
  margin: 0 auto;
  height: 3px;
  width: 25px;
  background-color: red;
  bottom: -7px;
  left: 0;
  right: 0;
  transition: all 1s ease; /* just for demo */
}
#btn-home:hover a:after{
  width: 100px;
<div id="btn-home">
  <a href="<?php echo get_home_url(); ?>">HOME</a>
</div>