html - 针对 :after element on hover

Question

当我将鼠标悬停在 #btn-home 按钮上时，我想定位 :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;
}

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

当鼠标悬停在 #btn-home 上时，我想调整 :after 元素的宽度。

Answer 1

这很容易做到。只需将选择器用作 #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>