[分享]css3文字中间画横线

CSS3中的文本排版功能越来越强大，可以实现各种样式效果，比如在文字中间画横线。

p{
  text-decoration: underline;
  text-decoration-color: red;
  text-decoration-skip-ink: none;
  text-decoration-style: double;
  text-decoration-thickness: 2px;
} 

上述代码实现了在p标签内的文字下方绘制一条红色双线，线宽为2px。

其中text-decoration属性用于指定文本装饰效果，包括横线、删除线、点线等多种样式。在本例中，我们设置值为“underline”，表示绘制横线。

接下来的text-decoration-color属性控制装饰效果的颜色，本例中设置为红色。

text-decoration-skip-ink属性可以控制文本装饰效果是否避开字符内部的油墨。默认值为“auto”，表示水平线条会避开字符内的油墨，但垂直线条不会；值为“none”时，水平和垂直线条都不避开字符内的油墨。

text-decoration-style属性指定线条的样式，有实线、虚线、点线、双线等多种可选值。本例中设置为“double”，表示双线样式。

最后的text-decoration-thickness属性用于设置线条宽度，单位为px。

通过组合这些属性，我们可以轻松地实现各种文本装饰效果，提升文本排版的美观性和可阅读性。