Double border with only one element

Question

I tried to get a double border header (underlined). The first is full, the second is just the width of the text. Borders must overlap. There is a simple solution with two nested elements:

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

I am wondering if the same effect can be obtained with selectors :after :before and only h1 .

Answer 1

It can be done. I used vw units.

Take a look at the working script

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: before and after pseudo-elements are those that draw borders. both of them are empty elements. with a certain width that makes their border be visible.

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

before : responsible for the red border. therefore, its width is set to "100%" of the viewing port. after : responsible for the red border. therefore, the hes width is set to 100% its parent ( <h1> ), so h1 set to `display: inline-block; '(therefore, it will cover only that and its contents)

vw is only supported for new browsers .

note that if you cannot use vw units, you can still do something familiar. remove display:inline-block; from h1 (making it break again) change the width before to 100% (so that it completely covers the whole path), change the value from after to some fixed value of your choice.

Edit: as pointed out in thgaskell comments,

There is an error in which vw units are not updated properly on webkit browsers when resizing a window.

Edit 2: You can use the <br /> tag or cleanup methods such as shown here to create the items that appear after the name.

Answer 2

I'm not sure what you need, but you can make the following rules:

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

Selectors

::after and ::before make sense when inserting new content (note the double colons). Here are some MDNs on the ::after selector and some examples:

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