在CSS中,我們可以使用border-bottom屬性來給文本添加下劃線,但是如果我們想要添加虛線的下劃線,該怎么實(shí)現(xiàn)呢?
p { border-bottom: 1px dashed #000; }
上述代碼將給p標(biāo)簽內(nèi)的文本添加1像素寬且?guī)в刑摼€的下劃線,顏色為黑色。如果想要改變虛線的樣式,可以使用其他的border-style
屬性值,如:dotted
、double
等。
另外,我們還可以使用偽元素::after
來實(shí)現(xiàn)下劃線的效果:
p::after { content: ""; display: block; height: 1px; width: 100%; border-bottom: 1px dashed #000; }
這段代碼將在p元素的內(nèi)容后面添加一個(gè)空的塊級(jí)元素,并且為其設(shè)置寬度為100%、高度為1像素、帶有虛線的下劃線。效果與border-bottom
相同,但是多了一個(gè)塊級(jí)元素。