本文目錄導讀：

1. 使用下劃線（Underline）屬性
2. 使用邊框（Border）屬性模擬橫線

CSS樣式在網頁設計中扮演著***關重要的角色，其中字體樣式設置尤為關鍵，除了基礎的字體大小、顏色和類型設置外，有時我們還需要為字體添加一些特殊效果，比如為字體添加橫線，本文將介紹除直接在CSS中為字體添加橫線外的其他相關技巧，以幫助您更好地進行網頁排版和設計。

使用下劃線（Underline）屬性

雖然這不是直接在CSS中為字體添加橫線的操作，但下劃線是CSS中常用的文本裝飾效果之一，通過為文本設置“text-decoration”屬性并賦值為“underline”，可以為文本添加下劃線。

p {
  text-decoration: underline;
}

使用邊框（Border）屬性模擬橫線

另一種方法是通過給文字包裹的元素添加邊框來模擬橫線效果，這種方式適用于需要更精細控制橫線樣式的情況。

h1 {
  border-bottom: 1px solid black; /* 為標題底部添加黑色橫線 */
}

三、利用文本陰影（Text Shadow）制作橫線效果

在某些情況下，可以利用文本陰影來創(chuàng)造出橫線的視覺效果，這種方式適用于需要為文字增加立體或裝飾效果時。

span::after {
  content: ""; /* 創(chuàng)建一個空內容 */
  display: block; /* 使內容塊級顯示 */
  border-bottom: 1px solid black; /* 添加底部橫線 */
  margin-top: 5px; /* 調整橫線位置 */
}

三種方法均可以在不直接對字體加橫線的情況下，通過CSS達到類似的效果，在實際應用中，可以根據需求和設計選擇合適的實現方式，這些方法不僅適用于網頁內容的排版，也適用于各種網頁設計場景，能夠幫助您創(chuàng)建出更具吸引力和專業(yè)性的網頁。