css 删除线 下划线

CSS可以通过属性值来添加删除线和下划线。这两种样式都是通过text-decoration属性来实现的。

/* 添加删除线 */text-decoration: line-through;
    /* 添加下划线 */text-decoration: underline;

在上面的两个属性中，text-decoration的值分别为“line-through”和“underline”，分别代表添加删除线和下划线。

可以将这两种样式应用于文本，a标签和其他块级元素。使用方法如下：

/* 应用删除线样式 */p {
      text-decoration: line-through;
}
a {
      text-decoration: line-through;
}
/* 应用下划线样式 */p {
      text-decoration: underline;
}
a {
      text-decoration: underline;
}

另外，text-decoration属性还可以用于组合使用这两种样式，或者添加其他特殊效果，例如虚线和波浪线。如下所示：

/* 组合使用删除线和下划线 */p {
      text-decoration: line-through underline;
}
/* 添加虚线 */p {
      text-decoration: line-through dotted;
}
/* 添加波浪线 */p {
      text-decoration: line-through wavy;
}

在使用text-decoration属性时，我们需要注意的是，这个属性仅适用于inline元素和一些块级元素。如果我们想为其他的块级元素添加删除线和下划线，需要使用伪类选择器来实现。

/* 为标题元素添加删除线和下划线 */h1:before {
      content: "";
      display: block;
      width: 100%;
      height: 1px;
      background-color: #000;
      margin-bottom: 10px;
}
h1:after {
      content: "";
      display: block;
      width: 100%;
      height: 1px;
      background-color: #000;
      margin-top: 10px;
}
    

上述代码使用了:before和:after伪类选择器来添加块级元素的删除线和下划线。对于这种方法，我们需要通过CSS样式来模拟添加删除线和下划线的效果。

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