在網站設計中，有時需要顯示商品原價和優惠價，最常見的方式就是將原價打上刪除線。那么，在CSS中如何實現價格加橫線的效果呢？

/* 在CSS中使用text-decoration屬性實現價格加橫線 */
.price{
text-decoration:line-through;
}

上述代碼將應用于class為“price”的標簽，其text-decoration屬性設為line-through，即加上橫線的效果。

如果要更改橫線的顏色、粗細、位置等屬性，可在text-decoration后加上其他屬性值。

/* 更改橫線的顏色、粗細 */
.price{
text-decoration: line-through red 2px;
}

上述代碼將應用于class為“price”的標簽，其text-decoration屬性設為line-through +顏色（紅色）+粗細（2像素）的效果。

除了通過CSS的text-decoration屬性實現價格加橫線的效果，還可以使用偽元素::before和::after來實現。 代碼實例如下：

/* 使用偽元素實現價格加橫線 */
.price{
position:relative;
}
.price::after{
content:'';
display:block;
position:absolute;
top:50%;
left:-2px;
right:-2px;
border-top:1px solid #ccc;
transform:rotate(-5deg);
}

上述代碼將應用于class為“price”的標簽，先設其position為relative，未來偽元素::after可根據該標簽的相對位置來定位。偽元素設為display:block后，可占據一整行，在其中構建橫線效果。通過top屬性將偽元素垂直居中，并通過left和right設置偽元素寬度，即橫線所占的長度。最后設置border-top、transform等屬性來實現橫線的樣式。

無論采取CSS的text-decoration屬性還是使用偽元素，都可便捷地實現價格加橫線的效果，為商品展示增添美觀與可讀性。