在CSS中,我們經常使用短橫線(-)來連接單詞,以創建自定義類名稱和屬性名稱。但是,您可能不知道,短橫線也可以用于在文字中間創建短橫線。
要在文本中間創建短橫線,您可以使用CSS的text-decoration屬性,并將它設置為line-through值。例如:
p { text-decoration: line-through; }
上述代碼將應用刪除線效果到段落中的所有文本。如果您只想向單個單詞應用刪除線,則可以將其包裝在元素中,并將text-decoration屬性應用于該元素。例如:
p { font-size: 24px; } span { text-decoration: line-through; }
上述代碼將在24像素字體大小下將單個單詞應用刪除線效果。
您還可以結合使用text-decoration屬性和其他CSS屬性,例如color和background-color,以創建更具視覺吸引力的效果。例如:
p { color: #ff0000; background-color: #f9f9f9; font-size: 24px; } span { text-decoration: line-through; color: #000; background-color: #fff; }
上述代碼將在具有紅色文本和淺灰色背景的24像素字體大小下,將單個單詞應用刪除線效果,并具有黑色文本和白色背景。
總之,使用text-decoration屬性將文本添加中間短橫線是一種常見而有用的技巧,可以幫助強調目標單詞或短語。結合其他CSS屬性,您可以創建出令人眼花繚亂的效果。