CSS字體刪除線效果是一種非常常見的文本樣式,在文字中加入刪除線可以更加直觀的表達出文字的含義或者表示已經過時的內容。下面介紹兩種實現CSS刪除線效果的方法。
第一種方法是使用text-decoration屬性來實現刪除線。text-decoration屬性是一種文本修飾屬性,可以用來控制文本的下劃線、刪除線等裝飾效果。要實現刪除線效果,只需要將text-decoration屬性的值設置為line-through即可。
.del-text { text-decoration: line-through; }
第二種方法是使用偽類選擇器::before和::after來實現刪除線。在文本前后添加偽元素,然后旋轉偽元素使其在文本上形成一條刪除線。代碼如下:
.del-text::before { content: ""; position: absolute; top: 50%; left: 0; width: 100%; height: 1px; background-color: black; transform: rotate(-20deg); } .del-text::after { content: ""; position: absolute; top: 50%; left: 0; width: 100%; height: 1px; background-color: black; transform: rotate(20deg); }
以上兩種方法都可以實現刪除線效果,可以根據需要選擇使用。另外需要注意的是,刪除線樣式通常用于表示一些已經過時的內容,使用時需要注意文本語義的正確性。
下一篇css字體內聯樣式