在網(wǎng)頁設(shè)計(jì)中，經(jīng)常會(huì)用到劃線效果，增加頁面設(shè)計(jì)的美觀性和實(shí)用性。而CSS提供了不同的劃線方式，其中一種是長(zhǎng)度自適應(yīng)的劃線。

長(zhǎng)度自適應(yīng)的劃線，不同于固定長(zhǎng)度的劃線，它的長(zhǎng)度會(huì)根據(jù)文字內(nèi)容的長(zhǎng)度而自動(dòng)調(diào)整，這樣就可以滿足不同文字長(zhǎng)度的需求。實(shí)現(xiàn)這種效果很簡(jiǎn)單，只需要使用CSS偽元素的after或before來生成一個(gè)Span標(biāo)簽，然后將其寬度設(shè)為100%即可。

.text {
position: relative;
}
.text::before {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 1px; /* 劃線高度 */
background-color: #999999; /* 劃線顏色 */
}

這樣就完成了長(zhǎng)度自適應(yīng)的劃線效果，你可以根據(jù)需要修改劃線的顏色、高度等屬性來適應(yīng)不同的設(shè)計(jì)需求。

總之，長(zhǎng)度自適應(yīng)的劃線不僅方便實(shí)用，同時(shí)也提高了網(wǎng)頁設(shè)計(jì)的美觀程度和用戶體驗(yàn)。