如何用CSS选择器选中h1元素中::before与::after之间的文本？

你的需求是给<h1>里的纯文本加动画，同时不影响通过::before和::after设置的顶部边框——简单说就是要精准定位h1内部的文本内容，而非整个h1元素或伪元素。

首先得明确：CSS选择器没办法直接选中文本节点，它只能定位元素、伪元素、属性这类目标，没法直接抓取元素里的纯文本内容。所以直接靠CSS选择器实现你的需求是做不到的，得换思路解决：

可行的替代方案 #

1. 用<span>包裹文本（推荐） #

修改HTML结构，把h1里的文本套进一个span标签里，这样就能直接给span单独加动画，伪元素的边框完全不受影响：

<h1><span>my heading</span></h1>

对应的CSS写法：

h1::before {border-top:1px solid #000;}
h1::after {border-top:1px solid #000;}

/* 给文本所在的span加动画 */
h1 span {
  animation: slideIn 0.8s forwards;
  opacity: 0;
}

@keyframes slideIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
}

这个方法最直接，也最容易维护，完全能实现你要的“只动文本、不动边框”的效果。

2. 尝试反向抵消动画（不推荐） #

如果实在不想改HTML，只能尝试给h1加动画，再让伪元素用反向样式抵消，但这种方法局限性极大——比如动画是透明度、位移这类属性时，伪元素也会被影响，很难完美分离，实际开发中基本用不上。

结论 #

经过验证，目前仅靠纯CSS选择器确实无法直接定位元素内的文本节点，修改HTML结构用span包裹文本是最可靠的解决方式。

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