CSS文本刪除線在網(wǎng)頁設(shè)計中用得很多,可以將一些字體或文章中的內(nèi)容進行刪除。下面將詳細介紹如何在CSS中實現(xiàn)文本刪除線。
.delete{
text-decoration: line-through;
}
如上代碼所示,在CSS中只需要使用text-decoration屬性,并設(shè)置為line-through,就可以給文本添加刪除線。具體實現(xiàn)可以通過給文本添加一個類名,然后在CSS中根據(jù)類名進行刪除線的設(shè)置。
如果需要在文字之間添加刪除線,可以使用偽元素::before或::after,在文字的前面或后面添加一個div元素,再進行刪除線的設(shè)置。代碼如下:
.delete::before{
content: '';
display: inline-block;
width: 30px;
height: 1px;
background-color: #000;
margin-right: 10px; //為了與文字之間有一定的距離
}
以上代碼中,給偽元素添加了一個空內(nèi)容,將其顯示模式設(shè)置為inline-block,就可以在文字的前面插入一個div元素。然后設(shè)置寬度、高度、背景色等屬性,再進行刪除線的設(shè)置。
總結(jié)來說,通過text-decoration屬性設(shè)置line-through,或者使用偽元素等方法,都可以在CSS中實現(xiàn)文本刪除線。在實際的網(wǎng)頁設(shè)計中根據(jù)需要進行選擇即可。
上一篇css換皮膚顏色嗎