CSS下拉导航栏hover伪元素content不显示问题求助

问题根源 #

你当前使用的 sub-categories a:hover:after:nth-child 写法无效，原因有两个：

• :nth-child() 是针对DOM实际子元素的选择器，而 :after 是CSS生成的伪元素，不属于DOM结构的子元素，两者无法结合使用。
• 现有CSS没有区分不同主分类下的子链接，无法给不同分类的子链接设置对应的前缀文本。

解决方案 #

步骤1：给子分类容器添加专属类 #

修改HTML，给每个主分类下的 .sub-categories 容器添加对应分类的类，方便CSS精准定位：

<nav>
  <ul class="main-nav">
    <li class="main-category">
      <a href="#">News</a>
      <ul class="sub-categories news-sub">
        <li><a href="#">Europe</a></li>
        <li><a href="#">Asia</a></li>
      </ul>
    </li>
    <li class="main-category">
      <a href="#">Politics</a>
      <ul class="sub-categories politics-sub">
        <li><a href="#">Europe</a></li>
        <li><a href="#">Asia</a></li>
      </ul>
    </li>
    <!-- 其余3个分类（Economy/Health/Education）同理添加对应类 -->
  </ul>
</nav>

步骤2：编写目标CSS样式 #

移除无效的伪元素选择器，针对不同分类的子链接设置专属悬停文本：

/* 通用伪元素布局样式 */
.sub-categories {
  position: relative; /* 确保伪元素定位基准正确 */
}
.sub-categories a:hover:after {
  content: "";
  position: absolute;
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
  margin-left: 8px;
  color: #666;
  font-size: 0.9em;
}

/* 各分类专属前缀文本 */
.news-sub a:hover:after {
  content: "News news from " attr(text); /* 直接获取链接文本 */
}
.politics-sub a:hover:after {
  content: "Politics news from " attr(text);
}
.economy-sub a:hover:after {
  content: "Economy news from " attr(text);
}
.health-sub a:hover:after {
  content: "Health news from " attr(text);
}
.education-sub a:hover:after {
  content: "Education news from " attr(text);
}

优化方案（可选） #

如果担心 attr(text) 兼容性，可给子链接添加 data-region 属性，更稳定地获取地区文本：

<li><a href="#" data-region="Europe">Europe</a></li>

对应CSS修改为：

.politics-sub a:hover:after {
  content: "Politics news from " attr(data-region);
}

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