在CSS中實(shí)現(xiàn)下劃線主要有幾種方法,下面將分別進(jìn)行介紹:
{ text-decoration: underline; }
這是最常見的一種方法,使用text-decoration屬性來(lái)添加下劃線樣式。可以設(shè)置不同的值,比如dotted、dashed、double等來(lái)改變下劃線樣式。
{ border-bottom: 1px solid black; }
這種方法是用border-bottom屬性來(lái)實(shí)現(xiàn)下劃線,在這里的1px是下劃線的粗細(xì),solid是下劃線的樣式,black是下劃線的顏色。
{ position: relative; } p::after { content: ""; display: block; height: 1px; width: 100%; background-color: black; position: absolute; bottom: -2px; left: 0; }
這種方法是使用偽元素::after來(lái)創(chuàng)建下劃線。首先要將p標(biāo)簽的position屬性設(shè)置為relative,接著使用::after來(lái)創(chuàng)建一個(gè)空元素,設(shè)置display屬性為block使它占據(jù)一整行,height屬性來(lái)控制下劃線的粗細(xì),width屬性設(shè)置為100%以充滿一整行,background-color為下劃線的顏色,然后設(shè)置position為absolute,bottom為負(fù)數(shù)使其充當(dāng)下劃線的位置,left為0,即居左。