双边框只有一个元素

Question

我试图得到一个双边(下划线)标题.第一个是全宽,第二个是文本宽度.边框应该重叠有一个简单的解决方案,有两个嵌套的元素:

<h1><span>Title</span></h1>

和css:

h1 {
    border-bottom: 1px solid red;
}

h1 span {
    display: inline-block;
    padding: 0 0 10px;
    margin-bottom: -1px;
    border-bottom: 1px solid blue;
}

Span具有inline-block显示属性,因此它具有正确的宽度.

我不知道是否有可能获得具有同样的效果:after,:before选择和唯一h1元素.

Answer 1

可以办到。我用过大众单位。

看看这个工作小提琴

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%他的父级（<h1>），这就是为什么h1被设置为 `display:inline-block;" （所以它只会像他的内容一样跨越）

vw仅新浏览器支持该单元。

请注意，如果您不能使用vw单位，您仍然可以做一些熟悉的事情。删除display:inline-block;from h1（使其再次跨越所有距离）更改beforeto的宽度100%（使其跨越所有距离），将 with 更改after为您选择的某个固定值。

编辑：正如thgaskell在评论中所述，

有一个错误，vw当调整窗口大小时，Webkit 浏览器上的单位无法正确更新。

编辑2： 为了使元素显示在标题之后，您可以使用<br />标签或清除技术，如此处所示。