双边框只有一个元素 [英] Double border with only one element

问题描述

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

 < 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

我想知道是否可以使用：之后获得相同的效果c>，：before 选择器和只有 h1 元素。

解决方案

可以。我使用了 vw 单位。

查看 工作小提琴

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; 
} 
  

说明：
< c $ c>之前& 之后伪元素是绘制边框的元素。
两者都是空元素。 。

它们绝对位于< h1> parent。

之前：负责红色边框。所以他的宽度设置为视口的100％。
之后：负责红色边框。所以他的宽度设置为他的父（< h1> ）的 100％，这就是为什么 h1 设置为display：inline-block;（因此它将像其内容一样覆盖）

code> vw 单位仅支持仅限新浏览器。 p>

注意，如果你不能使用 vw 单位，你仍然可以熟悉这一点。
delete the display：inline-block; 从 h1 （使其再次跨越）
更改到之前的的宽度（以使其跨越所有路径），
改变到您选择的某个固定值。

编辑：作为 thgaskell 第

有 vw 单位无法正确更新的错误

编辑2：
用于在调整窗口大小时调整窗口大小。

$ b使元素显示在标题之后，您可以使用< br /> 标记，或清除技术如shows 此处 。

I was trying to get a double bordered (underlined) header. First one is full width, second is just text width. Borders should overlap There is an easy solution with two elements nested like that:

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

and 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 has inline-block display property so it has right width.

I'm wondering if it's possible to get same effect with :after, :before selectors and only h1 element.

解决方案

It can be done. I've used vw units.

Take a look at this 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;
}

Explanation: the before & after pseudo elements are the ones that draw the borders. both of them are empty elements. with a certain width that causes their border to be visible.

they are absolutely position at the bottom of their <h1> parent.

before: responsible for the red border. so his width is set to '100%' of view port. after: responsible for the red border. so hes width is set to 100% of his parent (the <h1>), that's why the h1 is set to `display:inline-block;" (so it will span ony just as his content)

vw unit is supported by new browsers only.

notice that if you cant use vw units, you can still make something familiar to that. delete the display:inline-block; from h1 (causing it to span all the way again) change the width of before to 100% (to make it span all the way), change the with of after to some fixed value of your choice.

Edit: as thgaskell stated in th comment,

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

Edit 2: for making elements to show after the title, you can use a <br /> tag, or clearing techniques like showed here.

这篇关于双边框只有一个元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！