将 CSS class 添加到所有标题 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 class。 我想知道是否有办法自动将此 CSS class 添加到全站所有 (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

您正在将 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;
}

Answer 2

我假设 显示：table 应该满足您的需求：

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

Answer 3

我假设您不理解我之前的评论，所以这是一个解释。标签 header 不仅仅是文本，它是一个完整的 width:auto 框，如上图（第二个背景）所示。在您发送的代码中，您将下划线效果“box-shadow”赋予 header h2，这将按照说明将其赋予整个框。您在 h2 内写的文本位于 span 标签内，该标签只会覆盖文本而不是整个框，因此仅对 span 标签产生效果将解决您的问题，并且关于其他 h2 标签没有下划线，是因为您将效果切换为 span，所以您还必须将其他 h2 放在 span 中。并且由于您想添加具有不同属性的 h3，最佳方法是将 span 添加到所有 header + 添加 class name 或 id for h2 不同于 h3 并使用 class 名称或 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

如前所述，跳过跨度部分，直接应用于h2。 Header 元素默认是块级的，这就是为什么你会看到 background/fat 下划线延伸到整个 parent 元素。例如，您必须添加 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;
}

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

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 5

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

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

有关详细信息，请查看我们的教程 Tech Gigs

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

Add CSS class to all heading HTML elements?

html

css

tags

wordpress

class