css价格加横线 |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属性还是使用伪元素，都可便捷地实现价格加横线的效果，为商品展示增添美观与可读性。