添加 :hover 到内容属性答案

【问题标题】：Adding :hover to a content property添加 :hover 到内容属性
【发布时间】：2021-03-24 23:41:36
【问题描述】：

我想在用户将鼠标悬停在内容上时使用 content: "" 属性更改 CSS 创建的内容的样式。

.breadcrumb li{
  display: inline;
}
.breadcrumb li.location+li.location::before {
  content: ">";
  color: green;
  padding-right: 2.5px;
}
li.attribute a:hover {
  color:blue;
}
li.attribute::after{
  content: "x";
  color: gray;
  vertical-align: super;
  font-weight: 300;
  font-size: 15px;
}

所以我希望 x 在悬停时变为红色。我尝试使用：

li.attribute:hover::after{
  color: red;
}

但是当我将鼠标悬停在“有机”一词本身以及内容“x”上时，它会变成红色。

HTML：

<ul class="breadcrumb">
  <li  class="location">
    <a href="#">Shop</a>
  </li>
  <li  class="location">
    <a href="#">Groceries</a>
  </li>
  <li  class="location">
    <a href="#">Blueberries</a>
  </li>
  <li class="attribute">
    <a href="#">Organic</a>
  </li>

.breadcrumb li{
  display: inline;
}
.breadcrumb li.location+li.location::before {
  content: ">";
  color: green;
  padding-right: 2.5px;
}
li.attribute a:hover {
  color:blue;
}
li.attribute::after{
  content: "x";
  color: gray;
  vertical-align: super;
  font-weight: 300;
  font-size: 15px;
}
li.attribute:hover::after{
  color: red;
}

<ul class="breadcrumb">
  <li  class="location">
    <a href="#">Shop</a>
  </li>
  <li  class="location">
    <a href="#">Groceries</a>
  </li>
  <li  class="location">
    <a href="#">Blueberries</a>
  </li>
  <li class="attribute">
    <a href="#">Organic</a>
  </li>

【问题讨论】：

我认为根据这个答案是不可能的：stackoverflow.com/a/5777334/9140740
您是否只想使用::after 插入“x”？或者你可以使用其他方法？
我目前正在学习创建面包屑导航，所以我宁愿使用::after

标签： html css hover pseudo-element

【解决方案1】：

如果您不介意编辑 html，那么您可以插入 sup 标签而不是 ::after 伪元素并相应地应用 css -

.breadcrumb li{
  display: inline;
}
.breadcrumb li.location+li.location::before {
  content: ">";
  color: green;
  padding-right: 2.5px;
}
li.attribute a:hover {
  color:blue;
}
li.attribute sup{
  color: gray;
  font-weight: 300;
  font-size: 15px;
}
li.attribute sup:hover{
  color: red;
}

<ul class="breadcrumb">
  <li  class="location">
    <a href="#">Shop</a>
  </li>
  <li  class="location">
    <a href="#">Groceries</a>
  </li>
  <li  class="location">
    <a href="#">Blueberries</a>
  </li>
  <li class="attribute">
    <a href="#">Organic</a>
    <sup>x</sup>
  </li>

【讨论】：

感谢@praneet 的替代方案，但是，我目前正在学习创建面包屑导航，所以我宁愿在 CSS 中使用 ::after
我并不是说你要替换所有东西。保留您的代码和逻辑，但您可以将这些更改仅应用于“x”，以便实现您想要的。
实际上，这个问题的全部目的是想知道我是否可以为content: "" 设置:hover 的样式。不要添加 x 本身。
无法将:hover 状态添加到::before 或::after 伪元素。