[分享]css中怎么做点划线

CSS是用于网页设计和排版的关键技术之一。其中最常见的应用之一就是为网页文本添加点划线。下面介绍几种实现方式。/ 在文字后加入点划线 / .text { textdecoration: underli...

CSS是用于网页设计和排版的关键技术之一。其中最常见的应用之一就是为网页文本添加点划线。下面介绍几种实现方式。

/* 在文字后加入点划线 */
.text {
  text-decoration: underline dotted;
}

/* 在文字前加入点划线 */
.text {
  text-decoration: underline dotted;
  text-decoration-skip: none;
}

/* 只在文字间加入点划线 */
.text {
  border-bottom: 1px dotted;
} 

实现方法解析：

第一种方法是最简单的实现方式。将text-decoration属性设置为"underline dotted"，表示添加下划线，并且下划线样式为点划线。这种方法下划线会在文字后面出现。

第二种方法是在第一种方法的基础上，添加text-decoration-skip属性。text-decoration-skip属性默认值为"objects"，表示不skip任何对象。将它设置为"name"，则能够让下划线不在链接文字后面skip，而是和文字一起显示。

第三种方法比较特殊。使用border-bottom属性为文字添加下划线，并设置下划线样式为点划线。注意，这种方法只会在文字之间形成点划线，而不包括文字前后。