css文字刪除線

CSS文字刪除線是一種常見的文字樣式效果，可以為文字添加一條橫線用於表示該文字已被刪除或是註釋，同時也可用於強調文字的變更。

在網頁設計中，CSS文字刪除線的應用非常廣泛，在一些部落格文章中使用刪除線表示作者修改或刪除了原本的文字內容。當然，CSS文字刪除線也可用於顯示價格特價活動或做一些特別強調的文字。

具體來說，CSS文字刪除線用到的屬性是text-decoration，其值為line-through，如下所示：

<code>text-decoration: line-through;</code>

此外，在實際應用中，我們還可以利用CSS偽類選擇器來實現更靈活的文字刪除線。

例如，我們可以為ID為demo的文字新增一個滑鼠懸浮時的刪除線效果，如下所示：

<code>#demo:hover {
    text-decoration: line-through;
}</code>

以上程式碼表示給ID為demo的文字新增滑鼠懸浮時的刪除線效果，即當滑鼠移到該文字上方時，文字會出現刪除線。

如果我們想要新增一個特殊的刪除線樣式，可以使用CSS偽元素:before或:after來實現，如下所示：

<code>#demo:before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 1px;
    transform: translateY(-50%);
    background-color: #000;
}</code>

以上程式碼表示在ID為demo的文字前面新增一個刪除線樣式，刪除線的顏色為黑色，寬度佔據整個文字寬度，高度1像素，位置在文字的中央位置。

要注意的是，在使用CSS文字刪除線的時候，我們還要注意相容性問題。因為不同瀏覽器對text-decoration的解析可能會有所差異，所以寫作時要避免使用瀏覽器專屬的樣式修改方式，建議使用通用屬性。

以上是css文字刪除線的詳細內容。更多資訊請關注PHP中文網其他相關文章！