在
简单的CSS中,是否可以只在部分下划线下划线,特别是在左侧的第一个50px?
您可以使用
:before
伪元素并为其添加边框。
h1 {
position: relative;
line-height: 1.2em;
}
h1:before {
position: absolute;
left: 0;
top: 1.2em;
height: 0;
width: 50px;
content: '';
border-top: 1px solid red;
}
<h1>This is a header, partly underlined</h1>
使用pseudo-element
:
h1 {
position: relative;
}
h1::before {
content: '';
position: absolute;
bottom: 0; left: 0;
width: 50px;
height: 2px;
background-color: green;
}
<h1>foobar</h1>
您可以添加一个伪元素,其中包含几个带下划线的不间断空格。这样,您将获得真正的下划线而不是边框。但是,它仍然会交叉像"g"这样的字母。
h1::before {
content:'a0a0a0a0a0a0a0a0';
display:block;
position:absolute;
text-decoration:underline;
width:50px;
overflow:hidden;
}
<h1>Headline</h1>
<h1>Another Headline</h1>