html - 如何只在部分元素上获得悬停效果？

Question

我有以下代码:

.container {
 padding-top:20px;
}

.container:hover {
 background-color: red;
}

.text {
  padding-top: 20px;
}

.container:before {
content: 'before';
top: 5px;
position: absolute;
}

<div class='container'>
  <span class='text'>
    My text
  </span>
</div>

我需要“之前”作为标题，因此将其作为伪插入，向上移动并通过向 div 添加填充为其创建位置。现在，当我将鼠标悬停在 div 上时，伪也会突出显示，这是我不想要的。

因为它是外部应用程序的皮肤，所以我将元素添加到 dom 的可能性非常有限，这是我想应该做的。如何在没有伪的情况下仅突出显示 div 的底部？也许有更好的方法来设计伪本身的样式，这样它就不会被悬停？纯 CSS 表示赞赏。

Answer 1

要防止背景也覆盖填充，请将 background-clip: content-box; 添加到 .container:

.container {
  padding-top: 20px;
  background-clip: content-box;
}

.container:hover {
  background-color: red;
}

.text {
  padding-top: 20px;
}

.container:before {
  content: 'before';
  top: 5px;
  position: absolute;
}

<div class='container'>
  <span class='text'>
    My text
  </span>
</div>

或者使用margin-top: 20px;代替padding:

.container {
  margin-top: 20px;
}

.container:hover {
  background-color: red;
}

.text {
  padding-top: 20px;
}

.container:before {
  display: block;
  width: 100%;
  content: 'before';
  top: 5px;
  position: absolute;
}

<div class='container'>
  <span class='text'>
    My text
  </span>
</div>