html 文字 横线 自动长度,css怎么设置下划线的长度？

层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。

自定义下划线。使用:after，首先添加一个空的内容，为了让它排列到标题的下面，需要将其变成块级元素，用border-bottom设置下划线，可设置其颜色、粗细。

下划线的长度通过设置空内容的width属性来实现，还可以通过margin-top调整下划线与文字的距离。

.text{

font-family:Times New Roman;

font-size:24px;

}

.text:first-letter{

font-size:48px;

}

.text:after {

content:'';

display:block;

width:200px;

margin-top:-5px;

border-bottom:2px solid grey;

}

About

Technology

效果如下：

:after 伪元素在元素之后添加内容。

这个伪元素允许创作人员在元素内容的最后面插入生成内容。默认地，这个伪元素是行内元素，不过可以使用属性 display 改变这一点。