我有一个居中的div,里面嵌套了一个h1标签。是否有办法用比html默认更粗的线条给它加下划线?
U
标签的下划线:<style type="text/css">
u {
text-decoration: none;
border-bottom: 4px solid black;
}
</style>
在这种情况下,下划线将是四个像素。<span style="text-decoration: underline">jgq</span>
<span style="border-bottom: solid 1px">jgq</span>
<span style="border-bottom: solid 4px">jgq</span>
<h1 style="border-bottom: 5px solid black">
是的,这是可能的。添加此属性以设置您想要的厚度。
text-decoration-thickness: 5px;
您可以通过设置border-bottom-width属性来实现相同的视觉效果;
h2
{
border-bottom-color:black;
border-bottom-style:solid;
border-bottom-width:15px;
}
由于您并不总是想要 border-bottom(例如,项目可能具有填充,这样会显得太远),因此此方法最为有效:
h1:after {
content: '';
height: 1px;
background: black;
display:block;
}
height
。margin-top
:h1:after {
content: '';
height: 2px;
background: black;
display:block;
margin-top: 2px;
}