将 CSS 类添加到所有标题 HTML 元素？

Question

我目前正在为一些学校作业创建一个网站。 我正在使用带有 Divi 主题的 Wordpress。

我在网上找到了一些 CSS 代码，它可以让我在文本下方添加一条彩色线。我一直在我的所有标题上使用它。

• 这是我的标题示例：https://colindedeugd.nl/wp-content/uploads/2021/09/Header-Colored-Line-Example.jpg

它的 CSS 代码如下所示；

    .pa-color-highlight {
    text-decoration: none;
    box-shadow: inset 0 -.4em 0 rgba(48, 227, 255, 1);
    color: inherit;
}

为了将它添加到我的标题中，我使用了一些 HTML 代码；

<h2><span class="pa-color-highlight">Background</span></h2>

我的问题是每次我想使用标题时都必须手动添加此 HTML 代码。在标准文本编辑器中简单地将我的文本转换为“H2”会忽略这个 CSS 类。 我想知道是否有一种方法可以自动将此 CSS 类添加到站点范围内的所有 (H2) 标题中。 有没有简单的解决方案？如果是这样，那将是一个很大的帮助！

我已经尝试使用 CSS 直接将高亮 CSS 添加到标题中，但看起来像这样：

h2 {
    text-decoration: none;
    box-shadow: inset 0 -.4em 0 rgba(48, 227, 255, 1);
    color: inherit;
    font-size: 45px;
}

• 示例图片； https://colindedeugd.nl/wp-content/uploads/2021/09/Header-Colored-Line-Example-2.jpg

该行填充整个文本字段，而不是仅在文本本身下划线。如果这个问题有比其他问题更简单的解决方案，我会非常高兴！

感谢您的宝贵时间。

Answer 1

如果您使用安装了 DIVI 主题的 Wordpress，则无需添加任何 css 代码，因为 Divi 具有管理此类设计方面的所有功能。

只需打开文本模块的设置并导航到“设计选项卡”

欲了解更多信息，请查看我们的教程Tech Gigs

Answer 2

如前所述，跳过 span 部分并将其直接应用于 h2。默认情况下，标题元素是块级的，这就是为什么您会看到背景/胖下划线延伸到整个父元素的原因。例如，您必须添加 display:inline-block;、display:inline-flex; 或 display:table; 以使下划线仅覆盖 h2 文本的宽度：

h2 {
  display:inline-block;
  text-decoration: none;
  box-shadow: inset 0 -.4em 0 rgba(48, 227, 255, 1);
  color: inherit;
}

不知道您的标记的其余部分如何，这应该可以作为您的解决方案。 如果你想更深入地挖掘，你可以用伪元素来获得这个效果。这将使您更好地控制您希望该行/背景的外观。这是一个例子：

h2 {
  position:relative;
  display:inline-block;
}

h2::before {
  content:'';
  position:absolute;
  bottom:-2px;
  left:-5px;
  right:-5px;
  height:14px;
  background:linear-gradient(to bottom, rgb(48, 227, 255), rgba(32, 160, 255));
  z-index:-1;
}

<h2>Background</h2>
<p>A paragraph</p>

这里有更多关于伪类可以做什么的信息：CSS-tricks

Answer 3

我假设您不理解我之前的评论，所以这是一个解释。 标签header 不仅仅是文本，它是一个完整的width:auto 框，如上图所示（第二个背景）。 在您发送的代码中，您将下划线效果“box-shadow”赋予标题h2，这将如解释的那样将其赋予整个框。您在h2 中编写的文本位于span 标记内，该标记仅覆盖文本而不是整个框，因此仅对span 标记施加效果将解决您的问题，以及其他h2 标记没有下划线，是因为您将效果切换到span，所以您还必须将另一个h2 放在span 中。 并且由于您想添加具有不同属性的h3，因此最佳方法是将span 添加到所有标题+ 为h2 添加与h3 不同的类名或id，并使用该类名或id设置CSS。例如：

HTML:
<h2><span id="TextInsideH2" class="pa-color-highlight">Background</span></h2>
<h3><span id="TextInsideH3" class="pa-color-highlight">Background</span></h3>

CSS:
#TextInsideH2{css properties here}
#TextInsideH3{different css properties here}

Answer 4

我假设 display: table 应该满足您的需求：

h2 {
    text-decoration: none;
    box-shadow: inset 0 -.4em 0 rgba(48, 227, 255, 1);
    color: inherit;
    display: table;
}

Answer 5

您正在将 CSS 属性应用于所有 h2，并且 h2 是一个包含 span 元素的文本的宽框。 所以只需将代码的最后一部分从 h2 更改为 span

span {
    text-decoration: none;
    box-shadow: inset 0 -.4em 0 rgba(48, 227, 255, 1);
    color: inherit;
    font-size: 45px;
}