如何在 Divi 中应用替代文本下划线样式

文本下划线样式一直非常有限。 在网络上给文本加下划线最常用的方法是使用 CSS 属性“text-decoration: underline”。 Divi 甚至允许您在 Divi Builder 模块设置中部署和设置这种类型的下划线。 但是这种标准的下划线方法在样式和跨浏览器支持方面确实存在局限性。

当然，在大多数情况下，下划线文本不需要很复杂。 例如，在您网站上的所有链接下划线以表明它们是可点击的，这是一个标准应用程序，不一定需要任何替代方法。 但是，如果您希望将下划线提升到一个新的水平，这篇文章可能会有所帮助。

在本教程中，我将向您介绍如何将一些替代文本下划线样式应用于 Divi 中的文本。 我将向您展示使用 Divi 的内置选项为文本添加下划线的标准方法。 我还将向您展示如何使用底部边框作为文本下划线的替代方法。 使用底部边框不仅可以让您更好地控制样式，而且还支持所有浏览器。

让我们开始吧。

用文字装饰给文字加下划线（常用方法）

给文本加下划线的最常见和最直接的方法是使用文本装饰 CSS 属性。 事实上，Divi 允许您在模块的内置选项中使用此方法轻松设置文本样式。 只需查找文本字体样式选项并选择“ U ”图标即可部署下划线文本装饰。 选择下划线字体样式后，您还可以选择自定义下划线的颜色和样式。

这允许您使用不同于实际文本颜色的下划线颜色。

您可以从以下下划线样式中进行选择：

• 坚硬的
• 双倍的
• 虚线
• 虚线
• 波浪状的

您甚至可以定位正文中链接的下划线样式。 这使您在使用文本模块时可以更好地控制设计。 只需选择文本设计类别切换下的链接字体选项卡。 对于链接字体样式，选择“下划线”。 然后您可以相应地自定义链接下划线的颜色和样式。

文本装饰下划线样式限制

缺乏调整线宽和位置的能力

不幸的是，在使用 Divi 的内置设置添加 text-decoration: underline css 属性时，没有选项可以调整线条的宽度或线条的位置。 线条的宽度与字体大小相关，因此它会随着您增加字体大小而增加。 并且因为下划线的位置在基线上，下行（低于基线的小写字母）会挡住线条，导致一些不一致，尤其是有很多下行的单词（如“Typography”） .

如果您使用全部大写文本，则此限制可能不是问题，因为您无需担心任何下行字符。 如果支持调整下划线宽度和下划线位置就好了，但现在我们不走运。

缺乏浏览器支持

Internet Explorer 不支持 text-decoration-style 或 text-decoration-color 属性，因此无法自定义下划线样式（双、点、虚线等）和下划线颜色。 Safari 也不支持 text-decoration-style 属性，但您可以更改下划线颜色。

这种缺乏支持的情况不仅限于 Divi。 即使是自定义 CSS 也无济于事。

使用底部边框为文本加下划线

如果您正在寻找为文本样式加下划线的替代解决方案，我认为最好的选择是使用底部边框。 以下是一些很好的理由：

• 边框支持八种不同的边框样式来设置下划线的样式，包括：点线、虚线、实线、双线、凹槽、脊线、插图和起点。
• 您可以独立于字体大小自定义边框的宽度（厚度）。
• 您可以将边框定位为离文本更近或更远。
• 您可以为边框添加任何您想要的颜色。
• 所有浏览器都支持边框样式。

使用底部边框进行下划线的限制

• 仅限于块元素上的单行文本。 但是有办法解决这个问题（见下文）。
• 完全定位在下降器下方，有点难以正确定位（但可行）。

了解块元素和内联元素之间的区别

为了理解边框下划线的工作原理，您需要了解块元素和内联元素之间的区别。

块元素

块元素将自动跨越其容器的整个宽度（除非设置了自定义宽度）并从新行开始。 网站（包括使用 Divi 构建的网站）充满了块元素。

常见块元素的一些示例包括：

• Divi 部分、行、模块 (div)
• 正文或段落 (p)
• 标题（h1、h2、h3、h4、h5、h6）
• 列表（ol，ul）

向块元素添加底部边框时，边框将位于整个块下方。 因此，如果您有一段文本 (p) 或一个标题 (h1) 分成两行或更多行，则底部边框将仅应用于块的底部，而不是单独的文本行。

下面是当文本分成多行时向 h1 标题块元素添加底部边框的示例。

即使 css 是针对 h1 标签的，该行也仅适用于块元素。 因此，该行仅应用于最底部，而不是单独应用于每一行。

内联元素

与块元素不同，内联元素可以拆分成多行。 因此，如果您向内联元素添加底部边框（例如链接），即使链接分成新行，底部边框下划线也将被应用。 此外，您可以调整内联元素的内边距，而不会影响正文的行高，这对于定位底部边框下划线非常有用。

这是一些具有底部边框下划线的链接（默认情况下是内联元素）的示例。

简单地说，内联元素在分成多行时可以有底部边框下划线，而块元素则不能。

如何将底部边框下划线添加到单行文本（块元素）

以下是如何使用文本模块内置设置向单行文本添加底部边框的示例。 此选项最适用于标题，因为您会将文本限制为一行。

创建一个具有一列行的新部分。 然后添加具有以下内容的文本模块：

Underlining Typography

然后更新文本模块设置如下：

• 文字文字大小：46px（桌面）、40px（平板电脑）、26px（手机）
• 文本行高：1.8em
• 宽度：517px（桌面）、450px（平板）、293px（手机）
• 底部边框宽度：2px
• 底部边框颜色：#0c71c3
• 底部边框样式：虚线

如您所见，边框可以使用宽度、颜色和样式来设置样式。 由于底部边框是应用到模块上的，所以需要将模块的宽度调整为与文本相同的宽度。 因此，您需要相应地修改文本大小和模块宽度。

如何在跨行拆分的块元素（如标题）上添加底部边框下划线

如前所述，像标题（h1、h2、h3 等）这样的块元素不允许在每个换行符处内嵌应用底部边框。 为了解决这个问题，我们可以简单地用 span 标签包裹我们的文本。 跨度允许您将内联元素（如一组文本）组合在一起，为这些元素添加样式。 所以，如果我们想要一个 h1 标签（一个块元素）的底部边框，我们可以用一个额外的 span 标签将 h1 标签内的文本包裹起来。 然后我们可以给span标签添加下边框下划线样式。 这将允许我们在 h1 标签文本（或其中的一部分）下划线，即使它中断到另一行。

下面是一个示例，说明如何向使用自定义 CSS 拆分为多行文本的块元素（如标题）添加底部边框。

首先，添加一个具有一列行的新部分。 然后向该行添加一个文本模块。 在内容框中，将默认模拟文本替换为以下内容：

<h1><span>This is a Heading with Bottom Border Underlining Styled with a Span Tag</span></h1>

由于我们要添加底部边框下划线，让我们按如下方式增加 h1 标题行高度：

接下来在高级选项卡下添加以下自定义 CSS ID：

CSS ID：边框下划线

接下来打开页面设置模式并添加以下自定义 CSS：

.border-underline span {
border-bottom: 2px dashed #0c71c3;
padding: 0.1em 0;  
}

此底部边框样式将应用于 span 标签内的元素。 并且因为 span 标签是一个内联元素，下划线将应用于每一行的文本。

可以根据需要自定义 border-bottom 属性。 第一个值 (2px) 设置边框的厚度（或宽度）。 第二个值（虚线）设置边框的样式。 不要忘记，您还可以使用以下边框样式：dashed、dotted、double、groove、ridge、inset 和 outset。 第三个值 (#0c71c3) 设置边框的颜色。 您还可以结合文本模块内置选项中的文本行高值来调整自定义填充 css，以获得恰到好处的间距。

如果您不需要 span 标签并希望将整个 h1 标签转换为内联元素，则可以在页面设置中使用此 CSS：

.border-underline h1 {
border-bottom: 2px dashed #0c71c3;
padding: 0.1em 0;  
display: inline;
}

请注意，这个 css 是针对 h1 标签的。 除了底部边框和填充样式之外，“display: inline”将 h1 标签更改为内联元素，允许 h1 文本在多行上有下划线。

向 Divi 中的内联链接添加底部边框下划线

以下是如何使用自定义 CSS 向 Divi 中的内联链接文本添加底部边框的示例。 首先创建一个具有一列行的新部分，并向该行添加一个文本模块。

然后使用所见即所得编辑器向正文添加一些链接，以便您可以使用一些链接。

然后在 Advanced 选项卡下添加自定义 CSS 类，如下所示：

CSS 类：边框下划线

现在打开页面设置并添加以下自定义 CSS 以将底部边框应用于文本模块内的所有链接。

.border-underline a {
border-bottom: 1px solid #333333;
padding: 0.1em 0;  
}

可以根据需要自定义 border-bottom 属性。 第一个值 (1px) 设置边框的厚度（或宽度）。 第二个值（实心）设置边框的样式。 不要忘记，您还可以使用以下边框样式：dashed、dotted、double、groove、ridge、inset 和 outset。 第三个值 (#333333) 设置边框的颜色。

因此，如果您想要一个 2px 宽的底部边框下划线，带有虚线样式和不同的颜色，您可以将这些值替换为如下所示：

border-bottom: 2px dashed #0c71c3;

也可以调整填充值以垂直定位边框下划线。 因此，如果您希望该行距文本更远，则可以将填充值增加到如下所示的值：

padding: 0.3em 0;

您还可以将此自定义填充与文本模块内置选项中的文本行高值结合使用，以获得恰到好处的间距。

由于链接是内联元素，边框下划线保留在跨行拆分的链接上。

分频器呢？

如果您想通过给单行文本（块元素）加下划线来获得真正的创意，您可以随时使用 Divi 的分隔线模块。 分隔模块有许多内置选项，如样式、高度、宽度、背景、边框、框阴影等。 您甚至可以将分隔线堆叠在一起，以获得更多自定义外观。

这是一个分隔模块的快速示例，用于使用带有渐变背景的双线为文本加下划线。

只需在包含文本的文本模块下直接添加分隔模块即可。 然后更新以下内容：

• 背景渐变左颜色：#2b87da
• 背景渐变右颜色：#29c4a9
• 渐变类型：线性
• 梯度方向：90度
• 颜色：#ffffff
• 分隔线重量：2px
• 高度：2px
• 宽度：400px（这个需要调整到上面文字的宽度）
• 自定义填充：顶部 5px，底部 5px

最后的想法

我希望本教程为您提供一个有用的替代方法，以在 Divi 中添加文本下划线样式。 使用“文本装饰：下划线”的常用方法是迄今为止最简单的解决方案，但其局限性可能会造成拖累。 底部边框下划线方法确实可以让您更好地控制线条的样式和位置。 而且自定义 CSS 绝对不麻烦，可以根据您的需要轻松调整。 因此，如果您想将文本下划线提升到一个新的水平，这应该会有所帮助。

与往常一样，我期待在评论中收到您的来信。

干杯!