html - 只有一个元素的双边框

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

可以做到 我用过vw单位。

看看这个Working Fiddle

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> 的底部 parent 。

before : 负责红色边框。所以他的宽度设置为视口(viewport)的“100%”。 after : 负责红色边框。所以他的宽度设置为100%他的 parent ( <h1> )，这就是为什么 h1设置为 `display:inline-block;"(所以它将像他的内容一样跨越)

vw单位由 new browsers only 支持.

请注意，如果您不能使用 vw单位，你仍然可以做一些熟悉的东西。删除 display:inline-block;来自 h1 (使其再次跨越所有方式)更改 before 的宽度至 100% (让它一直跨越)，更改为 after到您选择的某个固定值。

编辑:如 thgaskell 在评论中所述，

there's a bug where vw units don't update properly on webkit browsers when the window is resized.

编辑 2:为了使元素显示在标题之后，您可以使用 <br />标记，或显示的清除技术 here .