如何在 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 絕對不麻煩，可以根據您的需要輕鬆調整。 因此，如果您想將文本下劃線提升到一個新的水平，這應該會有所幫助。

與往常一樣，我期待在評論中收到您的來信。

乾杯!