with：：After class & without ：：After class CSS 不起作用

Question

我试图为按钮添加css，但它不起作用。

<button>Test<button>

.CSS

.button:hover,
.button:focus,
.button:active {
  padding: 8px 18px;
}
.button:not(.button:after):hover,
.button:not(.button:after):focus,
.button:not(.button:after):active {
  padding: 8px 38px;
}

提前感谢

Answer 1

CSS 不是这样工作的，你不能在:not()选择器中定位伪元素。

但是，如果您希望浏览器在用户将光标悬停在伪元素上时忽略，而伪元素本身并不与元素本身重叠，则可以使用 pointer-events 属性执行此操作，如下所示：

button {
  position: relative;
}
button:hover,
button:focus {
  color: red;
}
button::after {
  content: 'Pseudo-element';
  pointer-events: none;
  position: absolute;
    left: 0;
    top: 150%;
  text-align: left;
  width: 200px;
}
button:hover::after,
button:focus::after {
  color: initial;
}

<button type="button" autofocus>
  Button
</button>