css3定义文字下划线

如今，越来越多的网站开始使用CSS3来定义文字下划线。而CSS3的文字下划线定义方法又是什么呢？

  text-decoration: underline;

这是传统的定义文字下划线的方式，但在CSS3中，还可以细分为以下几个新的属性值。

  text-decoration-line: underline;  /* 定义下划线 */
  text-decoration-color: red;      /* 定义下划线颜色 */
  text-decoration-style: dotted;   /* 定义下划线样式 */
  text-underline-offset: 5px;      /* 定义下划线偏移量 */

这些属性值可以组合使用，创建更丰富的下划线效果。

  text-decoration: underline red dotted;

以上代码定义了一个红色的点状下划线。

除此之外，CSS3还提供了一种用伪元素（::before ::after）来实现下划线效果的方法。

  p::after {
    content: "";
    display: block;
    margin: auto;
    width: 50%;
    height: 1px;
    background-color: black;
    margin-top: 10px;
  }

以上代码将在每个段落的结尾处添加一个宽度为50%的黑色下划线。

CSS3设计的文字下划线功能，不仅让网页设计更具创意和个性，也为我们提供了更多的选择和挑战。