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＆amp; after伪元素是绘制边界的元素。它们都是空元素。具有一定宽度，使其边框可见。

他们绝对位于<h1>父母的底部。

before：负责红色边框。所以他的宽度设置为视口的'100％'。 after：负责红色边界。所以他的宽度被设置为他父母的100%（<h1>），这就是为什么h1被设置为`display：inline-block;“（所以它会像他的内容）

new browsers only支持

vw单位。

请注意，如果您无法使用vw单位，您仍然可以对此进行熟悉。从display:inline-block;删除h1（导致它再次跨越）将before的宽度更改为100%（使其一直延伸），将after的内容更改为您选择的某个固定值。

编辑：作为 thgaskell 在评论中说明，

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

编辑2： 要使元素在标题后显示，您可以使用<br />标记，或清除显示here等技术。

Answer 2

我不确定这是不是你想要的，但你可以做这些规则：

h1 {
    ...
}

/* here are the direct children of every h1 */
h1>* {
    ...
}

当插入新内容时（注意双冒号），

::after和::before选择器才有意义。这是::after选择器上的一些MDN和一些示例：

https://developer.mozilla.org/en-US/docs/Web/CSS/::after

双边框只有一个元素

2 个答案: