CODEWITHSUNDEEP
htmlcsscss-selectors
user3550879
user3550879

Reputation: 3469

Targeting :after element on hover

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

#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;
}
<div id="btn-home">
  <a href="<?php echo get_home_url(); ?>">HOME</a>
</div>

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

Upvotes: 2

Views: 71

Answers (2)

Shahil Mohammed
Shahil Mohammed

Reputation: 3868

You need to add this in your code :

#btn-home a:after {
transition:all .4s linear;
}
#btn-home:hover a:after {
width: 50px;
}


#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 .4s linear;
}

#btn-home:hover a:after {
width: 50px;
}
<div id="btn-home">
    <a href="<?php echo get_home_url(); ?>">HOME</a> 
</div>

Upvotes: -1

Harry
Harry

Reputation: 89750

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>

Upvotes: 2

Related Questions