能否通过锚点:hover交互::after？仅用CSS实现类相邻元素效果可行吗？

1. 锚点的:hover动作能否与::after伪元素交互？ #

当然可以！你完全可以通过元素的:hover状态来控制它自身或者其他符合选择器规则的元素的::after伪元素样式，核心是选择器的写法要正确。

2. 用::after伪元素模拟相邻兄弟hover效果（无需JS） #

你想要实现的是当#a hover时，“模拟的Div B”（也就是#a的::after伪元素）背景变色，之前的代码不生效是因为选择器写错了：#a:hover + #a::after是在找处于hover状态的#a的相邻兄弟元素#a的伪元素，但页面里只有一个#a，这个选择器根本匹配不到任何内容。

只需要把选择器改成直接控制#a hover状态下的自身伪元素，就能实现你要的效果，完全不需要JavaScript：

/* 当#a hover时，修改它的::after伪元素样式 */
#a:hover::after {
  background: #ccc;
}

/* 定义::after伪元素的基础样式 */
#a::after {
  content: "\a Div B";
  white-space: pre;
  display: block; /* 让伪元素变成块级元素，背景色才能铺满整行 */
  margin-top: 10px; /* 可选，模拟两个div之间的间距 */
  padding: 4px; /* 可选，增加内边距让效果更自然 */
}

对应的HTML保持不变：

<div id="a">Div A</div>

这样当你把鼠标移到Div A上时，下面的“Div B”（伪元素）就会变成灰色背景，和你原本用相邻兄弟选择器实现的效果一致。

内容的提问来源于stack exchange，提问作者Barrosy