如何用CSS选择含特定文本的h2标签并添加前置图标？

纯CSS的间接实现方式 #

纯CSS本身确实没法直接根据元素内的文本内容选择元素，但可以通过给目标H2标签添加自定义类的方式间接实现，这也是WordPress场景里最实用的方案：

1. 手动添加类（简单直接） #

编辑文章时，给包含"Solution"的H2标签手动加上类名，比如：

<h2 class="solution-heading">Solution</h2>

然后在主题的自定义CSS里添加样式，用伪元素::before插入图标（这里用Font Awesome图标举例，也可以替换成本地图片）：

.solution-heading::before {
  content: "\f00c"; /* Font Awesome对勾图标编码 */
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  margin-right: 8px;
  color: #2ecc71;
}

2. 自动添加类（无需手动操作） #

如果不想每次编辑都手动加类，可以在WordPress主题的functions.php文件中添加一段PHP代码，通过the_content过滤器自动给包含指定文本的H2标签添加类：

add_filter('the_content', 'add_class_to_solution_h2');
function add_class_to_solution_h2($content) {
  // 匹配包含"Solution"的H2标签，忽略大小写
  $pattern = '/<h2>(.*?Solution.*?)<\/h2>/i';
  $replacement = '<h2 class="solution-heading">$1</h2>';
  $content = preg_replace($pattern, $replacement, $content);
  return $content;
}

添加完这段代码后，所有包含"Solution"的H2标签都会自动带上solution-heading类，再用上面的CSS样式就能显示图标了。

用XPath配合JS实现 #

XPath不能直接在CSS中使用，但可以通过JavaScript结合XPath选择目标元素，再动态添加样式或类：

// 用XPath选择所有文本内容为"Solution"的H2标签
const xpathResult = document.evaluate(
  '//h2[text()="Solution"]',
  document,
  null,
  XPathResult.ORDERED_NODE_SNAPSHOT_TYPE,
  null
);

// 遍历选中的元素，添加类（推荐用类配合CSS控制样式）
for (let i = 0; i < xpathResult.snapshotLength; i++) {
  const h2 = xpathResult.snapshotItem(i);
  h2.classList.add('solution-heading');
}

把这段JS代码放到主题的自定义JS区域，或者通过wp_enqueue_script添加到前端，之后同样用CSS的伪元素来设置图标样式即可。

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