Come aumentare il divario tra testo e sottolineatura nei CSS

306

Utilizzando CSS, quando è stato text-decoration:underlineapplicato il testo , è possibile aumentare la distanza tra il testo e la sottolineatura?

css  underline 
— maxp
fonte
1
Non è esattamente quello che stavi chiedendo, ma è stata una lettura interessante sull'argomento: CSS Design: sottolineature personalizzate
— Peter Rowell,
La distanza è determinata da un carattere utilizzato. Prova i caratteri sicuri per il Web.
— Alexei Danchenkov,
1
Oggi CSS3 ha molte nuove proprietà di decorazione del testo. Controlla alligator.io/css/text-decoration Esempio: text-underline-position: under;e text-decoration-skip: ink;tieni presente che questo probabilmente non è compatibile con i browser precedenti.
— Chocolata,
1
Un'altra buona soluzione
— w3spi,
1
Vota text-underline-offsetqui: bugs.chromium.org/p/chromium/issues/…
— Mark Fisher,

Risposte:

356

No, ma potresti andare con qualcosa di simile border-bottom: 1px solid #000e padding-bottom: 3px.

Se vuoi lo stesso colore della "sottolineatura" (che nel mio esempio è un bordo), devi semplicemente tralasciare la dichiarazione di colore, ovvero border-bottom-width: 1pxe border-bottom-style: solid.

Per multilinea, puoi avvolgere i tuoi testi multilinea in un arco all'interno dell'elemento. Ad esempio, <a href="#"><span>insert multiline texts here</span></a>basta aggiungere border-bottome paddingsulla <span>- Demo

— chelmertz
fonte
3
Il mio unico problema con questo trucco è quando sto usando l'altezza della linea uguale all'altezza div e poi vertical-align: middle; per centrarlo, quindi non posso usare questo trucco perché la sottolineatura finisce sotto il div.
— Deweydb,
@deweydb: Che ne dici di aggiungere anche il fondo imbottito al div contenitore? jsfiddle.net/dYfjc/1
— chelmertz,
+1 Non sapevo di lasciare la proprietà color per ereditare il colore del font, che in futuro risparmierebbe molto sudore e lacrime!
— Larry
9
Non sono sicuro del perché questa risposta abbia così tanti voti positivi. Questo non funziona completamente con testi multilinea.
3
Per multilinea, puoi avvolgere i tuoi testi multilinea in un arco all'interno dell'elemento. Ad esempio, <a href="#"><span>insert multiline texts here</span></a>aggiungi semplicemente il bordo inferiore e l'imbottitura sul <span>. jsfiddle.net/Aishaterr/vrpb2ey7/1
— Daniel Hernandez
133

Aggiornamento 2019: il gruppo di lavoro CSS ha pubblicato una bozza per il livello di decorazione del testo 4 che aggiungerebbe una nuova proprietà text-underline-offset(oltre atext-decoration-thickness ) per consentire il controllo dell'esatto posizionamento di una sottolineatura. Al momento della stesura di questo documento, è una bozza in fase iniziale e non è stata implementata da alcun browser, ma sembra che alla fine renderà obsoleta la tecnica di seguito.

Risposta originale di seguito.

Il problema con l'utilizzo border-bottom direttamente è che anche con padding-bottom: 0la sottolineatura tende ad essere troppo lontano dal testo a guardare bene. Quindi non abbiamo ancora il controllo completo.

Una soluzione che ti dà la precisione dei pixel è quella di utilizzare il :after pseudo elemento:

a {
    text-decoration: none;
    position: relative;
}
a:after {
    content: '';

    width: 100%;
    position: absolute;
    left: 0;
    bottom: 1px;

    border-width: 0 0 1px;
    border-style: solid;
}

Modificando il bottom proprietà (i numeri negativi vanno bene) è possibile posizionare la sottolineatura esattamente dove si desidera.

Un problema con questa tecnica da tenere presente è che si comporta in modo un po 'strano con gli avvolgimenti di riga.

— ultimo bambino
fonte
2
Questo non funzionerà per il mio problema particolare, ma è un trucco fantastico. +1
11
Un buon lavoro, ma questo non funzionerà per le ancore che si estendono su più linee
— Willster,
@ last-child Questo è meglio di sottolineare, ma con l'involucro del testo questo non funzionerebbe per ogni riga
— Nishantha,
Un problema è che il bordo inferiore e la sottolineatura sono due cose diverse. Ad esempio, parte del testo dovrebbe estendersi sotto la sottolineatura. Se modifichi gli A-tag come pulsanti, non hai la libertà di usare il bordo inferiore come sottolineato.
— Anders Lindén,
10
Immagina di dire a qualcuno che è nuovo nello sviluppo web, un graphic designer, un utente medio o tua madre, che questo è ciò che è necessario per aggiungere uno spazio controllato tra il testo e la sua sottolineatura e si chiederanno cosa stai facendo della tua vita .
— MarcGuay,
79

Puoi usare questo text-underline-position: under

Vedi qui per maggiori dettagli: https://css-tricks.com/almanac/properties/t/text-underline-position/

Vedi anche la compatibilità del browser .

— Duc Huynh
fonte
2
Grazie! Se stai provando a fare una sottolineatura tratteggiata e vedi che è disegnata senza spazio tra la parte inferiore del testo e la linea, allora questo risolve il problema.
— Jonathan Cross,
6
Questa è la risposta corretta per i browser moderni senza alcuna soluzione alternativa.
— Paras Shah,
2
Non funziona in Firefox, nemmeno con il prefisso del fornitore, ma è in una specifica W3C: w3.org/TR/css-text-decor-3/#text-underline-position-property . Altre risorse pertinenti: quackit.com/css/css3/properties/css_text-underline-position.cfm
— rosell.dk
4
A partire da questo momento, questo funziona davvero solo nel browser Chrome e non è una soluzione per altri browser.
— miir
2
Bene, a partire dalla data di questo commento, vedo che funziona anche su Firefox .
— Jarad
15

Ecco cosa funziona bene per me. 

<style type="text/css">
  #underline-gap {
    text-decoration: underline;
    text-underline-position: under;
  }
</style>
<body>
  <h1 id="underline-gap"><a href="https://Google.com">Google</a></h1>
</body>
Espandi frammento

— Jordan Starrk
fonte
2
È importante notare che text-underline-positionnon è supportato da Firefox come da developer.mozilla.org/en-US/docs/Web/CSS/…
— Floran Gmehlin,
Molto interessante. Grande richiamo. Grazie!
— Jordan Starrk,
Supportato in Firefox a partire da 74, secondo lo stesso link.
— GSerg
11

Entrare nei dettagli dello stile visivo di text-decoration:underlineè praticamente inutile, quindi dovrai andare con un qualche tipo di hacking che rimuovetext-decoration:underline e lo sostituisce con qualcos'altro fino a quando una versione futura magica e lontana del CSS ci dà più controllo .

Questo ha funzionato per me:

   a {
    background-image: linear-gradient(
        180deg, rgba(0,0,0,0),
        rgba(0,0,0,0) 81%, 
        #222222 81.1%,
        #222222 85%,
        rgba(0,0,0,0) 85.1%,
        rgba(0,0,0,0)
    );
    text-decoration: none;
}
<a href="#">Lorem ipsum</a> dolor sit amet, <a href="#">consetetur sadipscing</a> elitr, sed diam nonumy eirmod tempor <a href="#">invidunt ut labore.</a>
Espandi frammento

  • Regola i valori% (81% e 85%) per modificare la distanza della linea dal testo
  • Regola la differenza tra i due valori% per modificare lo spessore della linea
  • regolare i valori di colore (# 222222) per cambiare il colore di sottolineatura
  • funziona con più elementi in linea
  • funziona con qualsiasi sfondo

Ecco una versione con tutte le proprietà proprietarie per una compatibilità all'indietro:

a {     
    /* This code generated from: http://colorzilla.com/gradient-editor/ */
    background: -moz-linear-gradient(top,  rgba(0,0,0,0) 0%, rgba(0,0,0,0) 81%, rgba(0,0,0,1) 81.1%, rgba(0,0,0,1) 85%, rgba(0,0,0,0) 85.1%, rgba(0,0,0,0) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0)), color-stop(81%,rgba(0,0,0,0)), color-stop(81.1%,rgba(0,0,0,1)), color-stop(85%,rgba(0,0,0,1)), color-stop(85.1%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,0))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,0) 81%,rgba(0,0,0,1) 81.1%,rgba(0,0,0,1) 85%,rgba(0,0,0,0) 85.1%,rgba(0,0,0,0) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,0) 81%,rgba(0,0,0,1) 81.1%,rgba(0,0,0,1) 85%,rgba(0,0,0,0) 85.1%,rgba(0,0,0,0) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,0) 81%,rgba(0,0,0,1) 81.1%,rgba(0,0,0,1) 85%,rgba(0,0,0,0) 85.1%,rgba(0,0,0,0) 100%); /* IE10+ */
    background: linear-gradient(to bottom,  rgba(0,0,0,0) 0%,rgba(0,0,0,0) 81%,rgba(0,0,0,1) 81.1%,rgba(0,0,0,1) 85%,rgba(0,0,0,0) 85.1%,rgba(0,0,0,0) 100%); /* W3C */

    text-decoration: none;
}

Aggiornamento: versione SASSY

Ho fatto un mix di scss per questo. Se non usi SASS, la versione normale sopra funziona ancora alla grande ...

@mixin fake-underline($color: #666, $top: 84%, $bottom: 90%) {
    background-image: linear-gradient(
        180deg, rgba(0,0,0,0),
        rgba(0,0,0,0) $top,
        $color $top + 0.1%,
        $color $bottom,
        rgba(0,0,0,0) $bottom + 0.1%,
        rgba(0,0,0,0)
    );
    text-decoration: none;
}

quindi usalo così:

$blue = #0054a6;
a {
    color: $blue;
    @include fake-underline(lighten($blue,20%));
}
a.thick {
    color: $blue;
    @include fake-underline(lighten($blue,40%), 86%, 99%);
}

Aggiornamento 2: Suggerimento per i discensori

Se hai un colore di sfondo uniforme, prova ad aggiungere un sottile text-strokeotext-shadow dello stesso colore dello sfondo per rendere gradevoli i discendenti.

Credito

Questa è una versione semplificata della tecnica che ho trovato originariamente su https://eager.io/app/smartunderline , ma l'articolo è stato rimosso.

— squarecandy
fonte
Sfortunatamente il link eager.io non funziona più. Ricordi qual è stato l'hack per rendere più belli i discensori?
— kano,
1
@Kano - Credo che stesse usando l'ombra del testo nello stesso colore di uno sfondo solido.
— squarecandy
Inoltre, con la tecnica sopra puoi impostare un colore della sottolineatura diverso dal testo, quindi a volte lo imposto in modo che sia più chiaro del testo, il che rende le collisioni con i discendenti meno un problema di leggibilità.
— squarecandy
7

So che è una vecchia domanda, ma per l'impostazione del testo a riga singola display: inline-blocke quindi l'impostazione heightha funzionato bene per me per controllare la distanza tra un bordo e il testo.

— Domenico P
fonte
1
Non avevo bisogno di impostare l'altezza. L'ho appena avvolto in un altro div e siccome volevo che fosse centrato ho semplicemente impostato l'allineamento del testo sul div esterno.
— Guy Lowe,
6

@ La risposta dell'ultimo figlio è un'ottima risposta!

Tuttavia, l'aggiunta di un bordo al mio H2 ha prodotto una sottolineatura più lunga del testo.

Se stai scrivendo dinamicamente il tuo CSS o se come me sei fortunato e sai quale sarà il testo, puoi fare quanto segue:

  1. cambia contentin qualcosa della lunghezza giusta (cioè lo stesso

  2. testo) imposta il colore del carattere su transparent(o rgba(0,0,0,0))

per sottolineare <h2>Processing</h2>(ad esempio), modificare il codice dell'ultimo figlio in:

a {
    text-decoration: none;
    position: relative;
}
a:after {
    content: 'Processing';
    color: transparent;

    width: 100%;
    position: absolute;
    left: 0;
    bottom: 1px;

    border-width: 0 0 1px;
    border-style: solid;
}
— Michael Greisman
fonte
9
Gli H2 sono elementi di blocco che potrebbero spiegare perché la sottolineatura fosse più lunga del testo. Forse display: inline-blocklo risolverebbe. Sostituire il testo con contentsembra un hack che potrebbe rompersi in molti modi.
— ultimo figlio,
3

Vedi il mio violino .

Dovresti utilizzare la proprietà larghezza del bordo e la proprietà di riempimento. Ho aggiunto alcune animazioni per renderlo più bello:

body{
  background-color:lightgreen;
}
a{
  text-decoration:none;
  color:green;
  border-style:solid;
  border-width: 0px 0px 1px 0px;
  transition: all .2s ease-in;
}

a:hover{
  color:darkblue;
  border-style:solid;
  border-width: 0px 0px 1px 0px;
  padding:2px;
}
<a href='#' >Somewhere ... over the rainbow (lalala)</a> , blue birds, fly... (tweet tweet!), and I wonder (hmm) about what a <i><a href="#">what a wonder-ful world!</a> World!</i>
Espandi frammento

— polvere di stelle
fonte
2

Un'alternativa per testi o collegamenti multilinea, puoi avvolgere i tuoi testi in un arco all'interno di un elemento a blocchi. 

<a href="#">
    <span>insert multiline texts here</span>
</a>

quindi puoi semplicemente aggiungere il bordo inferiore e il riempimento sul <span>.

a {
  width: 300px;
  display: block;
}

span {
  padding-bottom: 10px;
  border-bottom: 1px solid #0099d3;
  line-height: 48px;
}

Puoi riferirti a questo violino. https://jsfiddle.net/Aishaterr/vrpb2ey7/2/

— Daniel Hernandez
fonte
2

Se vuoi:

  • multilinea
  • tratteggiata
  • con imbottitura inferiore personalizzata
  • senza involucri

sottolinea, puoi utilizzare un'immagine di sfondo con altezza di 1 pixel con repeat-xe 100% 100%posizione:

display: inline;
background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAABCAYAAAD0In+KAAAAEUlEQVQIW2M0Lvz//2w/IyMAFJoEAis2CPEAAAAASUVORK5CYII=') repeat-x 100% 100%;

Puoi sostituire il secondo 100%con qualcosa di simile pxo emper regolare la posizione verticale della sottolineatura. Inoltre puoi usare calcse vuoi aggiungere un'imbottitura verticale, ad esempio:

padding-bottom: 5px;
background-position-y: calc(100% - 5px);

Naturalmente puoi anche creare il tuo modello png base64 con un altro colore, altezza e design, ad esempio qui: http://www.patternify.com/ - basta impostare la larghezza e l'altezza quadrata su 2x1.

Fonte di ispirazione: http://alistapart.com/article/customunderlines

— mcmimik
fonte
1

Se si utilizza text-decoration: underline;, è possibile aggiungere spazio tra sottolineatura e testo utilizzandotext-underline-position: under;

Per ulteriori informazioni sulle proprietà della posizione di sottolineatura del testo, puoi dare un'occhiata qui

— Ifrah
fonte
0

Sono stato in grado di farlo utilizzando la U (tag di sottolineatura)

u {
    text-decoration: none;
    position: relative;
}
u:after {
    content: '';
    width: 100%;
    position: absolute;
    left: 0;
    bottom: 1px;
    border-width: 0 0 1px;
    border-style: solid;
}


<a href="" style="text-decoration:none">
    <div style="text-align: right; color: Red;">
        <u> Shop Now</u>
    </div>
</a>
— Arun Prasad ES
fonte
0

Questo è quello che uso:

html:

<h6><span class="horizontal-line">GET IN</span> TOUCH</h6>

css:

.horizontal-line { border-bottom: 2px solid  #FF0000; padding-bottom: 5px; }
— Constantinos Constantinou
fonte
0

Quello che uso:

<span style="border-bottom: 1px solid black"> Enter text here </span>
— Francis Acosta
fonte
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.