我想创造这样的东西。
我真的很累,因为我只能创建类似于标题宽度的线条。我必须创造更小的"线然后前进。尝试用::之前完成它,但它对我不起作用。有没有可能的方法来创建它。
<h1>Some heading here</h1>
答案 0 :(得分:3)
h1 {
display: inline-block;
position: relative;
}
h1::after {
content: '';
position: absolute;
left: 10%;
display: inline-block;
height: 1em;
width: 70%;
border-bottom: 1px solid;
margin-top: 5px;
}
将宽度更改为您希望的长度,并将“左”更改为该行所在的位置,并增加“margin-top”以使其更远离文本。
答案 1 :(得分:0)
h1 {
position: relative;
text-align: center
}
h1:before{
content: '';
position: absolute;
left: 50%;
bottom: -6px;
width: 130px;
height: 2px;
background: red;
transform:translateX(-65px) /* width/2 */
}
<h1>some heading here</h1>
答案 2 :(得分:0)
<h1>some <span style="border-bottom: 2px solid red;">heading</span> here</h1>
如果您正在尝试这样做,您可以简单地在特定单词下面添加边框。