protezione rotonda sottolineare in CSS

Question

Si può fare sottolineature protezione rotonda (come nell'immagine qui sopra) con i CSS? Come?

C'è un modo per farlo con border-bottom? border-radius produce questo effetto elegante invece:

Answer 1

EDIT: Ho missunderstood cosa hpique wated, ma questo dovrebbe funzionare:

HTML:

<div id="test">Hello world</div> 

CSS:

#test { 
    font-size: 50px; 
    background: transparent; 
    border-radius: 10px; 
    height: 10px; 
    width: 255px; 
    box-shadow: 0 55px 0 0 #000; 
    font-family: sans-serif; 
} 

Fondamentalmente sto mettendo il testo su un div, e l'ombra del riquadro sarà della stessa dimensione del set height e width per quel div, basta suonare con lo height/width e si dovrebbe ottenere quello che vuoi ...

JSBin Demo

Schermata dalla demo:

Answer 2

No. Se si vuole fare questo puramente con HTML + CSS si avrebbe bisogno di un elemento secondario per sedersi sotto il testo, e quindi applicare curvatura e colore di sfondo a quella . In alternativa, ea mio avviso, è possibile che utilizzi un'immagine.

Answer 3

Sì, è possibile. Aggiungere un elemento di blocco utilizzando :after senza contenuti e dare la larghezza/altezza desiderata in questo modo:

h1:after { 
    content:""; 
    float:left; 
    background:green; 
    width:100%; 
    height:6px; 
    border-radius: 3px; 
} 

Fiddle qui: https://jsfiddle.net/toqL0agq/1/

Answer 4

Come risposta di youtag, la mia soluzione utilizza pseudo-elementi-ma la mia sottolineatura viene eseguito solo la lunghezza del testo e può avvolgere su più righe (con una sottolineatura che scorre sotto ogni riga di testo).

Fondamentalmente, I CAP manualmente le estremità del bordo dell'elemento con cerchi pseudo-elemento prima e dopo l'elemento:

h1 a { 
    text-decoration: none; 
    position: relative; 
    border-bottom: 15px solid; 
    padding-bottom:3px; 
} 

    h1 a:hover, h1 a:focus { 
    border-bottom: 15px solid #eb6d32; 
} 

h1 a:before, h1 a:after { 
    content: ''; 
    height: 15px; 
    width: 15px; 
    background-color: currentColor; 
    border-radius: 15px; 
    position: relative; 
    display: inline-block; 
    vertical-align: text-bottom; 
    margin-bottom: -18px; 
} 

h1 a:before { 
    left: .2ex; 
    margin-left: -.4ex; 
} 

h1 a:after { 
    margin-right: -.4ex; 
    right: .2ex; 
} 

Io uso left e right sugli pseudo-elementi così le estremità non si attacchino troppo oltre il testo.

Vedere il mio codepen.

Answer 5

è possibile farlo utilizzando un div al di sotto del testo e impostando il suo raggio-bordo a 2000px.penso che sarà più semplice

HTML:

<div class="wrapper"> 
    <span>Hell World</span> 
    <div class="underline"></div> 
</div> 

CSS:

.underline{ 
    height:0px;border: 3px solid black; 
    border-radius: 2000px; 
} 
.wrapper{ 
    display:inline-block; 
} 

JQuery SNIPPET:

var arbitrarynumber = 5 
$('.underline').width($('.underline').parent().width()-arbitrarynumber)