悬停 ::before 伪（不是宿主元素）时如何在 ::after 伪元素上应用样式？答案

【问题标题】：How to apply style on ::after pseudo element when hovering ::before pseudo (not the host element)?悬停 ::before 伪（不是宿主元素）时如何在 ::after 伪元素上应用样式？
【发布时间】：2019-05-28 10:47:08
【问题描述】：

那里有类似的问题，但显然我没有找到类似的问题。所以问题是：

当悬停 ::before 伪元素（不是宿主元素）时，如何在 ::after 伪元素上应用一些样式？

代码示例：

.contact {
  position: relative;
}

.contact::before {
  content: '';
  position: absolute;
  top: 0;
  right: -10px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: hotpink;
}

.contact::after {
  content: 'Preferred contact';
  font-size: 10px;
  color: #fff;
  padding: 5px 10px;
  position: absolute;
  top: 0;
  right: -15px;
  transform: translateX(100%);
  border-radius: 5px;
  background-color: rgba(0, 0, 0, .5);

  display: none;
}

.contact:hover::after {
  display: block;
}

    &lt;span class="contact"&gt;skype_hello85&lt;/span&gt;

所以当悬停元素（跨度）本身时 - 一切都很好。但我想 ::after 只会在 ::before 悬停时显示，而不是宿主元素本身。

感谢您的帮助！

【问题讨论】：

简短回答：你不能。但是如果你可以改变html你就可以做到
谢谢。是的，我知道这件事。我只是对是否可以在没有额外 HTML 噪音的情况下制作它很感兴趣。
不工作。 ::after 或 ::before 没有悬停语句。

标签： html css hover pseudo-element

【解决方案1】：

您可以将样式应用于位于第一个选择器 DOM 级别内的元素。

例如：

<div class="wrapper">
    ::before
    <p>Lorem ipsum dolor</p>
    ::after
</div>

wrapper 类在这里包含 p 标记和两个伪元素（::before 和 ::after），它们都位于在一个 DOM 级别中，在 ::after 元素上开发 ::before 元素的样式是不可能的。唯一的方法是将样式应用到wrapper CSS 类或使用 JS。

更多信息您可以获取here。

【讨论】：