css 划去金额的线的标签

在网页设计中，我们经常需要标示一些已经付款或者是已经下架的物品，一般会通过在金额前加上删除线的方式来表示这种状态。那么如何通过CSS来实现这个删除线呢？其实非常简单，我们只需要在对应的HTML标签上添加text-decoration: line-through; 的CSS样式即可。

例如： p style="text-decoration:line-through;
    ">
    $50/p>
    

这样在网页上就会显示出这个金额，并且有删除线。同样的道理，我们也可以把这个样式定义在CSS样式表中，以便全局使用：

例如：head>
      style>
    .deleted {
          text-decoration: line-through;
    }
      /style>
    /head>
    body>
      p class="deleted">
    $50/p>
      p class="deleted">
    $100/p>
      p>
    $200/p>
    /body>
    

通过在HTML标签上添加class="deleted"的方式，就能够实现对应的删除线效果。这种方式不仅可以应用在文字上，也可以应用在价格等数字上。

除了删除线之外，还可以通过其他的text-decoration属性来实现不同的装饰效果，如下划线、波浪线等等。这些属性的使用方式和text-decoration:line-through; 类似，可以参考相关文档。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！