使用CSS是否可以让标题下划线的宽度比标题文本小?我有一个H1标题的样式如下:
h1 {
font-weight: 300;
display: inline-block;
padding-bottom: 5px;
border-bottom: 1px #d2202f solid;
}
这将在我的H1标题下方产生一条细红色下划线。然而,是否有可能使下划线成为标题文本的50%?
您可以使用伪元素 :before
(或:after
):
h1 {
font-weight: 300;
display: inline-block;
padding-bottom: 5px;
position: relative;
}
h1:before{
content: "";
position: absolute;
width: 50%;
height: 1px;
bottom: 0;
left: 25%;
border-bottom: 1px solid red;
}