可以办到。我用过大众单位。
看看这个工作小提琴
HTML:
<h1 class="SpecialBorder">Title</h1>
CSS:
*
{
margin: 0;
padding: 0;
}
.SpecialBorder
{
display: inline-block;
position: relative;
}
.SpecialBorder:before , .SpecialBorder:after
{
content:'';
position: absolute;
left: 0;
bottom: 0;
}
.SpecialBorder:before
{
width: 100vw;
border-bottom: 1px solid red;
}
.SpecialBorder:after
{
width: 100%;
border-bottom: 1px solid blue;
}
说明:before
&after
伪元素是绘制边框的元素
。它们都是空元素。具有一定的宽度,使其边框可见。
他们绝对位于<h1>
父母的底部。
before
: 负责红色边框。所以他的宽度设置为视口的“100%”。
after
: 负责红色边框。所以他的宽度设置为100%
他的父母(the <h1>
),这就是为什么h1
设置为`display:inline-block;”(所以它会像他的内容一样跨越)
vw
单位仅由新的浏览器支持。
请注意,如果您不能使用vw
单位,您仍然可以制作一些熟悉的东西。删除display:inline-block;
from h1
(使其再次跨越)将宽度更改before
为100%
(使其跨越所有路径),将 with of 更改after
为您选择的某个固定值。
编辑:正如thgaskell在评论中所说,
调整窗口大小时,存在一个错误,即vw
单位在 webkit 浏览器上无法正确更新。
编辑 2:
为了使元素显示在标题之后,您可以使用<br />
标签,或者像这里显示的清除技术。