6

我试图获得一个双边框（下划线）标题。第一个是全宽，第二个是文本宽度。边框应该重叠有一个简单的解决方案，其中两个元素嵌套如下：

<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元素获得相同的效果。

4

2 回答 2

3

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

看看这个工作小提琴

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 />标签，或者像这里显示的清除技术。

于 2013-09-23T08:21:05.590 回答
0

我不确定这是否是您想要的，但您可以执行以下规则：

h1 {
    ...
}

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

::after和选择器在插入::before新内容时有意义（注意双冒号）。以下是关于选择器的一些 MDN和一些示例：::after

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

于 2013-09-22T23:56:58.743 回答