css 文本元素,右侧文本后面有一行
css text element with line behind text on the right
如何在css中制作这个标题?最好不用 flexbox。
图片:
尽管我希望您输入一些代码并向我们展示您的尝试,但以下是一种实现方法。
基本上你创建了一个 after
伪元素,给它一个 1px 的高度和你选择的背景颜色。然后你将它绝对定位在它的 parent 标题元素中,具有较低的 z-index.
可能有更好的方法,也可以使用 flexbox,但我没有按照问题提到这一点。
.with-line {
position: relative;
}
.with-line span {
/*change it to match whatever background color you want.*/
background: white;
}
.with-line:after {
position: absolute;
left: 0;
right: 0;
content: "";
height: 1px;
background: #666;
top: 50%;
z-index: -1;
}
<h1 class="with-line"><span>Hello</span></h1>
如何在css中制作这个标题?最好不用 flexbox。
图片:
尽管我希望您输入一些代码并向我们展示您的尝试,但以下是一种实现方法。
基本上你创建了一个 after
伪元素,给它一个 1px 的高度和你选择的背景颜色。然后你将它绝对定位在它的 parent 标题元素中,具有较低的 z-index.
可能有更好的方法,也可以使用 flexbox,但我没有按照问题提到这一点。
.with-line {
position: relative;
}
.with-line span {
/*change it to match whatever background color you want.*/
background: white;
}
.with-line:after {
position: absolute;
left: 0;
right: 0;
content: "";
height: 1px;
background: #666;
top: 50%;
z-index: -1;
}
<h1 class="with-line"><span>Hello</span></h1>