如何在Wordpress Divi主题中为全站H2标题自动添加CSS类实现文本下划线效果

方案1：纯CSS实现（推荐，操作最简单） #

你直接给h2加样式出现下划线撑满整行的问题，根源是h2默认是块级元素，宽度会自动撑满父容器，你只需要修改h2的展示属性让宽度适配文本长度即可，直接将以下CSS代码添加到Divi主题自定义CSS面板即可全站生效：

h2 {
    display: inline; /* 若设置的上下外边距不生效，可替换为 display: inline-block */
    text-decoration: none;
    box-shadow: inset 0 -.4em 0 rgba(48, 227, 255, 1);
    color: inherit;
    font-size: 45px;
}
/* 若需要h2保持独占一行的特性，额外添加以下代码 */
h2::after {
    content: "";
    display: block;
    margin-top: 10px; /* 可根据需求调整下划线和后续内容的间距 */
}

Divi自定义CSS入口：WordPress后台 → Divi → 主题选项 → 自定义CSS，粘贴后保存即可。

方案2：JS自动插入span标签（完全匹配手动添加的效果，不改动原有h2属性） #

如果你不想修改h2默认的块级属性，可以用JS自动给所有h2的内容套上对应类的span标签，和你手动添加的效果完全一致，将以下代码添加到Divi主题的头部脚本区域即可：

document.addEventListener('DOMContentLoaded', function() {
  document.querySelectorAll('h2').forEach(h2 => {
    h2.innerHTML = `<span class="pa-color-highlight">${h2.innerHTML}</span>`;
  });
});

Divi脚本添加入口：WordPress后台 → Divi → 主题选项 → 集成 → 将代码粘贴到「里的代码」区域，保存后全站生效，同时你需要保留原有的.pa-color-highlight的CSS样式代码。

内容的提问来源于stack exchange，提问作者Colin de Deugd