在CSS中,我們可以使用text-decoration屬性來給文本添加下劃線或橫杠,下面是一個例子:
p { text-decoration: line-through; }
上面的代碼將給所有p標簽里的文本添加一條橫杠,這在某些情況下可以用來表示文本的刪除或已過時狀態。除了line-through屬性外,text-decoration還有其他幾種屬性值:
text-decoration: underline; /* 給文本添加下劃線 */ text-decoration: overline; /* 給文本添加上劃線 */ text-decoration: underline overline; /* 同時添加上下劃線 */ text-decoration: none; /* 取消文本的下劃線/橫杠 */
需要注意的是,如果給一個內聯元素(如a標簽)添加下劃線/橫杠時,需要將其設為塊級元素(display:block),否則會發現下劃線/橫杠并沒有完全覆蓋文本,看起來比較奇怪。另外,text-decoration不僅適用于文字,還適用于其他元素,如表格中的單元格。
最后,如果我們需要讓橫杠/下劃線更加突出,可以結合其他屬性,比如調整顏色、粗細等:
p { text-decoration: line-through; text-decoration-color: red; /* 橫杠顏色為紅色 */ text-decoration-thickness: 2px; /* 設置橫杠粗細為2像素 */ }
現在你已經學會了如何使用CSS給文字添加橫杠/下劃線,快去嘗試一下吧!