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(使其再次跨越)将宽度更改before100%(使其跨越所有路径),将 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 回答