CSS下劃線是一個經常用到的樣式,通過下劃線可以突出文本的重要性,加強閱讀效果。下面介紹幾種實現下劃線的方法:
/* 線性下劃線 */ .underline { border-bottom: 1px solid #000; }
使用border-bottom屬性,給文本添加一條1像素寬的實線下劃線。可以通過調整顏色、寬度和樣式等,實現不同需求的下劃線效果。
/* 虛線下劃線 */ .underline { border-bottom: 1px dashed #000; }
將border-bottom的樣式調整為dashed,實現虛線下劃線效果。同樣可以通過調整樣式屬性,實現不同風格的虛線下劃線。
/* 雙下劃線 */ .underline { text-decoration: underline double; }
text-decoration是一種CSS屬性,可以給文本添加不同風格的修飾線。將其設置為underline double時,即可實現雙下劃線效果。
/* 通過偽元素實現下劃線 */ .underline::after { content: ""; display: block; border-bottom: 1px solid #000; }
還可以通過偽元素實現下劃線效果。通過設置content為空值,display為block,以及border-bottom實現下劃線樣式,即可給文本添加下劃線。此方法的優點是可以單獨控制下劃線的樣式、位置和大小。