Doppelter Rahmen mit nur einem Element

Question

Ich habe versucht, einen doppelt umrandeten (unterstrichenen) Header zu bekommen. Die erste ist die volle Breite, die zweite ist nur die Textbreite. Grenzen sollten überlappen Es gibt eine einfache Lösung mit zwei Elementen wie die verschachtelten:

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

und 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 hat inline-block Anzeigeeigenschaft, so dass es die richtige Breite hat.

Ich frage mich, ob es möglich ist, den gleichen Effekt mit :after, :before Selektoren und nur h1 Element zu bekommen.

Answer 1

es getan werden kann. Ich habe vw Einheiten verwendet.

Werfen Sie einen Blick auf diese 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; 
} 

Erläuterung: die before & after Pseudoelemente sind diejenigen, die die Grenzen zeichnen. beide sind leere Elemente. mit einer bestimmten Breite, die ihre Grenze sichtbar macht.

sie sind absolut Position an der Unterseite ihrer <h1> Eltern.

before: verantwortlich für die rote Grenze. Daher ist seine Breite auf '100%' des Ansichtsanschlusses eingestellt. after: verantwortlich für die rote Grenze. so hes Breite wird auf 100% seiner Eltern (die <h1>), das ist, warum die h1 ist auf 'display: inline-block;“(so wird es ony umspannen wie sein Inhalt)

vw Einheit unterstützt wird new browsers only

Beachten Sie, dass wenn Sie vw Einheiten nicht verwenden können, können Sie noch etwas vertraut machen. löschen die display:inline-block; von h1 (so dass es wieder den ganzen Weg zu überspannen) die Breite before-100% ändern (um es der ganzen Weg zu machen umspannen), die after bis zu einem gewissen festen Wert Ihrer Wahl mit dem ändern.

Edit: als thgaskell in th Kommentar erwähnt,

gibt es einen Bug, bei dem vw Einheiten Browser nicht richtig auf Webkit aktualisieren, wenn die Fenstergröße verändert wird.

Edit 2: Elemente für die Herstellung nach dem Titel zu zeigen, können Sie einen <br /> Tag verwenden können, oder wie Clearing-Techniken zeigten here.

Answer 2

Ich bin mir nicht sicher, ob das, was Sie wollen, aber Sie könnten diese Regeln tun:

h1 { 
    ... 
} 

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

::after und ::before Selektoren Sinn machen würde, wenn neue Inhalte einfügen (die Doppel Doppelpunkte beachten). Hier einige MDN auf ::after Wähler und einige Beispiele:

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