html - :hover effect on p:after in specific div

Question

我似乎无法正确激活父 div 中的 p 元素的 :hover 状态

对于父 div 中的所有 p 元素，有一个宽度为 0 的 :after 以在悬停时创建下划线。当 p 悬停时，我希望宽度从“0”变为“2em”。

我不确定如何在悬停时正确定位 p 和 :after。

我觉得它看起来应该像下面这样。

HTML

<div class="parent">
    <p>Menu Option A</p>
    <p>Menu Option B</p>
</div>

CSS

.top_menu_wrapper p:after {
  content: "";
  display: block;
  height: 3px;
  width: 0em;
  background: white;
  margin: auto;
  transition: all 0.4s ease;
}
.parent p:hover p:after {
  width: 2em;
}

Answer 1

如果我没理解错的话——它就是你悬停时想要操作的 p。

所以。这是错误的 .parent p:hover p:after。

:hover 和 :after 应该相互附加

像这样:

 .parent p:hover:after {
   width: 2em;
 }