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 改变这一点。

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

html中加长下滑线,css怎么设置下划线的长度？
层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言. 自定义下划线.使 ...
成功解决在word文件的表格中当输文字时自动出现加红色和下划线
成功解决在word文件的表格中当输文字时自动出现加红色和下划线目录解决问题解决思路解决方法解决问题成功解决在word文件的表格中当输文字时自动出现加红色和下划线解决思路在输入文字的时候 ...
java itext 横线,Java itext生成pdf设置下划线，,package cn.o
Java itext生成pdf设置下划线,,package cn.opackage cn.outofmemory.example.itextpdf;import com.itextpdf.text.C ...
CSS设置下划线与文字间距距离
css的写下划线 text-decoration: underline; 但是这样的样式下划线太靠近文字了如图修改方式 border-bottom: 1px solid red;padding ...
HTML怎么设置下划线？html文字加下划线方法
HTML中的下划线曾经是将文本包含在<u></u>标签中的问题,但是这种方法已被放弃,而更倾向于使用更多功能的CSS.一般来说,下划线被认为是引起人们对文本注意的一种方式,那么 ...
怎么html文字下划线,HTML怎么设置下划线？html文字加下划线方法
HTML中的下划线曾经是将文本包含在标签中的问题,但是这种方法已被放弃,而更倾向于使用更多功能的CSS.一般来说,下划线被认为是引起人们对文本注意的一种方式,那么HTML怎么设置下划线?html文字加 ...
CSS设置下划线对齐方式,如何巧妙利用CSS自定义网页下划线样式
如何巧妙利用CSS自定义网页下划线样式 CSS为网页设计者们提供了丰富而灵活的页面元素表现形式的控制手段.但是,或许你可能注意到了,对于下划线,CSS提供的可选操作却不是很多.一般情况下,人们看到的下 ...
mac Word中设置下划线之后文字后面不显示的问题解决
mac Word中设置下划线之后文字后面不显示的问题解决这里也是找了很久解决方法发现大多数都是直接能够找到设置啥啥啥,但是 mac 我在操作的时候一直没找到方法. 这里突然发现就是有一个解决的小方式 ...
Tablayout动态设置下划线长度
由于最近项目需要,需要设置tabLayout下方下划线的长度.笔者上网找了半天,也没有找到方法.后来了解到在源码中对tabLayout的下划线进行了设置.并没有方法可以直接设置. 然后,笔者看到了某位 ...

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

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

最新文章

热门文章

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

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

最新文章

热门文章

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

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