Doppio bordo con un solo elemento

Question

Stavo cercando di ottenere un'intestazione con doppio bordo (sottolineato). Il primo è a larghezza intera, il secondo è solo la larghezza del testo. Borders dovrebbero sovrapporsi C'è una soluzione facile con due elementi annidati così:

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

e 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 ha inline-block proprietà di visualizzazione in modo che abbia larghezza di destra.

Mi chiedo se è possibile ottenere lo stesso effetto con i selettori :after, :before e solo l'elemento h1.

Answer 1

Si può fare. Ho usato le unità vw.

Date un'occhiata a questo 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; 
} 

Spiegazione: il before & after pseudo elementi sono quelli che disegnano i bordi. entrambi sono elementi vuoti. con una certa larghezza che fa sì che il loro bordo sia visibile.

sono assolutamente posizionati nella parte inferiore del rispettivo genitore <h1>.

before: responsabile del confine rosso. quindi la sua larghezza è impostata su "100%" della porta di visualizzazione. after: responsabile del confine rosso. così la larghezza hes è impostato su 100% del genitore (il <h1>), è per questo che il h1 è impostata a `display: inline-block;" (in modo che si estenderà per girarci intorno proprio come il suo contenuto)

vw gruppo è sostenuto da new browsers only.

avviso che se non si utilizzano le unità vw, è ancora possibile fare qualcosa di familiare a questo. eliminare il display:inline-block; da h1 (che lo abbracciano tutto il senso di nuovo) modificare la larghezza di before-100% (per renderlo abbracciano tutta la strada), cambiare la con di after a un valore fisso di vostra scelta.

Edit: come thgaskell indicato nel commento esimo,

c'è un bug in cui vw unità non vengono aggiornati correttamente su webkit browser quando la finestra viene ridimensionata.

Edit 2: per fare gli elementi per mostrare dopo il titolo, è possibile utilizzare un tag <br />, o cancellando tecniche come mostrato here.

Answer 2

non sono sicuro se questo è ciò che si vuole, ma si poteva fare queste regole:

h1 { 
    ... 
} 

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

::after e ::before selettori avrebbe senso quando inserimento nuovi contenuti (notare il doppio due punti). Ecco alcuni MDN su ::after selettore e alcuni esempi:

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