Cómo aumentar la brecha entre el texto y el subrayado en CSS

306

Usando CSS, cuando el texto tiene text-decoration:underline aplicado, ¿es posible aumentar la distancia entre el texto y el subrayado?

css  underline 
— maxp
fuente
1
Esto no es exactamente lo que estaba pidiendo, pero fue una lectura interesante sobre el tema: CSS Diseño: Destaca personalizada
— Peter Rowell
La distancia está determinada por una fuente utilizada. Pruebe las fuentes seguras para la web.
— Alexei Danchenkov
1
CSS3 tiene muchas propiedades nuevas de decoración de texto en estos días. Consulte alligator.io/css/text-decoration Ejemplo: text-underline-position: under;y text-decoration-skip: ink;tenga en cuenta que esto probablemente no sea compatible con versiones anteriores de navegadores antiguos.
— chocolata
1
— w3spi
1
Vote por text-underline-offsetaquí: bugs.chromium.org/p/chromium/issues/…
— Mark Fisher

Respuestas:

356

No, pero podrías ir con algo como border-bottom: 1px solid #000y padding-bottom: 3px.

Si desea el mismo color del "subrayado" (que en mi ejemplo es un borde), simplemente omita la declaración de color, es decir, border-bottom-width: 1pxyborder-bottom-style: solid .

Para líneas múltiples, puede ajustar sus textos de líneas múltiples en un espacio dentro del elemento. Por ejemplo <a href="#"><span>insert multiline texts here</span></a>, simplemente agregue border-bottomy paddingen <span>- Demo

— chelmertz
fuente
3
Mi único problema con este truco es cuando estoy usando una altura de línea igual a la altura del div y luego vertical-align: middle; para centrarlo, entonces no puedo usar este truco porque entonces el subrayado termina debajo del div.
— deweydb
@deweydb: ¿Qué tal si agregamos el relleno inferior al contenedor div también? jsfiddle.net/dYfjc/1
— chelmertz
+1 No sabía si dejar fuera la propiedad de color para heredar el color de la fuente, ¡eso ahorrará mucho sudor y lágrimas en el futuro!
— Larry
99
No estoy seguro de por qué esta respuesta tiene tantos votos positivos. Esto no funciona completamente con textos multilínea.
3
Para líneas múltiples, puede ajustar sus textos de líneas múltiples en un espacio dentro del elemento. Por ejemplo <a href="#"><span>insert multiline texts here</span></a>, simplemente agregue borde inferior y relleno en el <span>. jsfiddle.net/Aishaterr/vrpb2ey7/1
— Daniel Hernández el
133

Actualización 2019: El Grupo de Trabajo de CSS ha publicado un borrador para el nivel 4 de decoración de texto que agregaría una nueva propiedad text-underline-offset(así comotext-decoration-thickness ) para permitir el control sobre la ubicación exacta de un subrayado. Al momento de escribir este artículo, es un borrador en una etapa inicial y no ha sido implementado por ningún navegador, pero parece que eventualmente hará que la siguiente técnica sea obsoleta.

Respuesta original a continuación.

El problema de usar border-bottomdirectamente es que incluso con padding-bottom: 0, el subrayado tiende a ser demasiado lejos del texto para quedar bien. Entonces todavía no tenemos control completo.

Una solución que le brinda precisión de píxeles es usar el :afterpseudo 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;
}

Al cambiar el bottom propiedad (los números negativos están bien), puede colocar el subrayado exactamente donde lo desea.

Un problema con esta técnica para tener cuidado es que se comporta un poco raro con los ajustes de línea.

— último niño
fuente
2
Esto no funcionará para mi problema particular, pero este es un truco fantástico. +1
11
Buen trabajo, pero esto no funcionará para las anclas que abarcan varias líneas
— Willster
@ last-child Este es mejor que subrayado, pero con el ajuste de texto esto no funcionaría para cada línea
— Nishantha
Un problema es que un borde inferior y un subrayado son dos cosas diferentes. Por ejemplo, parte del texto debe extenderse debajo del subrayado. Si aplica un estilo a las etiquetas como botones, no tiene libertad para usar el borde inferior como subrayado.
— Anders Lindén
10
Imagine decirle a alguien que es nuevo en el desarrollo web, un diseñador gráfico, un usuario promedio o su madre, que esto es lo que se requiere para agregar un espacio controlado entre el texto y su subrayado, y se preguntarán qué está haciendo con su vida. .
— MarcGuay
79

Puedes usar esto text-underline-position: under

Consulte aquí para obtener más detalles: https://css-tricks.com/almanac/properties/t/text-underline-position/

Ver también compatibilidad del navegador .

— Duc Huynh
fuente
2
¡Gracias! Si está intentando hacer un subrayado discontinuo y ve que se dibuja sin espacio entre la parte inferior del texto y la línea, esto soluciona el problema.
— Jonathan Cross
66
Esta es la respuesta correcta para los navegadores modernos sin ninguna solución.
— Paras Shah
2
No funciona en Firefox, ni siquiera con el prefijo de proveedor, pero ESTÁ en una especificación W3C: w3.org/TR/css-text-decor-3/#text-underline-position-property . Otro recurso relevante: quackit.com/css/css3/properties/css_text-underline-position.cfm
— rosell.dk
44
A partir de este momento, esto realmente solo funciona en el navegador Chrome, y no es una solución para otros navegadores.
— miir
2
Bueno, a la fecha de este comentario, veo que esto también funciona en Firefox .
— Jarad
15

Esto es lo que funciona bien para mí. 

<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>
Expandir fragmento

— Jordan Starrk
fuente
2
Es importante tener en cuenta que text-underline-positionno es compatible con Firefox según developer.mozilla.org/en-US/docs/Web/CSS/…
— Floran Gmehlin
Muy interesante. Gran reclamo. ¡Gracias!
— Jordan Starrk
Compatible con Firefox a partir de 74, según el mismo enlace.
— GSerg
11

Entrar en los detalles del estilo visual de text-decoration:underlinees bastante inútil, por lo que tendrá que recurrir a algún tipo de pirateo que elimine text-decoration:underliney reemplace con algo más hasta que una versión mágica y lejana del futuro nos dé más control .

Esto funcionó para mí:

   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>
Expandir fragmento

  • Ajuste los valores de% (81% y 85%) para cambiar qué tan lejos está la línea del texto
  • Ajuste la diferencia entre los dos valores de% para cambiar el grosor de la línea.
  • ajustar los valores de color (# 222222) para cambiar el color de subrayado
  • funciona con elementos de línea múltiple en línea
  • funciona con cualquier fondo

Aquí hay una versión con todas las propiedades patentadas para cierta compatibilidad con versiones anteriores:

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;
}

Actualización: versión SASSY

Hice una mezcla de scss para esto. Si no usa SASS, la versión normal anterior aún funciona muy bien ...

@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;
}

luego úsalo así:

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

Actualización 2: Consejo de descendientes

Si tiene un color de fondo sólido, intente agregar uno delgado text-strokeo text-shadowdel mismo color que el fondo para que los descendientes se vean bien.

Crédito

Esta es una versión simplificada de la técnica que encontré originalmente en https://eager.io/app/smartunderline , pero el artículo ha sido eliminado.

— Squarecandy
fuente
Lamentablemente, el enlace eager.io ya no funciona. ¿Recuerdas cuál fue el truco para hacer que los descendientes se vean mejor?
— kano
1
@Kano: creo que estaba usando text-shadow en el mismo color que un fondo sólido.
— squarecandy
Además, con la técnica anterior, puede establecer el color del subrayado diferente del texto, por lo que a veces lo configuro para que sea más claro que el texto, lo que hace que las colisiones con los descendientes sean menos problemáticas para la legibilidad.
— squarecandy
7

Sé que es una pregunta antigua, pero para la configuración de texto de una sola línea display: inline-blocky luego la configuración me heightha funcionado bien para controlar la distancia entre un borde y el texto.

— Dominic P
fuente
1
No necesitaba establecer la altura. Simplemente lo envolví en otro div y, como quería que estuviera centrado, simplemente configuré la alineación de texto en el div de salida.
— Guy Lowe
6

@ ¡La respuesta del último hijo es una gran respuesta!

Sin embargo, agregar un borde a mi H2 produjo un subrayado más largo que el texto.

Si está escribiendo dinámicamente su CSS, o si, como yo, tiene suerte y sabe cuál será el texto, puede hacer lo siguiente:

  1. cambiar el contenta algo de la longitud correcta (es decir, el mismo

  2. texto) establezca el color de fuente en transparent(o rgba(0,0,0,0))

para subrayar <h2>Processing</h2>(por ejemplo), cambie el código del último hijo para que sea:

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
fuente
99
Los H2 son elementos de bloque que podrían explicar por qué el subrayado era más largo que el texto. Tal vez display: inline-blocklo arreglaría. Reemplazar el texto con contentparece un truco que podría romperse de muchas maneras.
— último hijo
3

Mira mi violín .

Debería usar la propiedad de ancho de borde y la propiedad de relleno. Agregué un poco de animación para que se vea mejor:

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>
Expandir fragmento

— Stardust
fuente
2

Una alternativa para textos o enlaces multilínea, puede envolver sus textos en un espacio dentro de un elemento de bloque. 

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

entonces solo puede agregar borde inferior y relleno en el <span>.

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

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

Puede referirse a este violín. https://jsfiddle.net/Aishaterr/vrpb2ey7/2/

— Daniel Hernández
fuente
2

Si tu quieres:

  • multilínea
  • punteado
  • con relleno inferior personalizado
  • sin envoltorios

subrayado, puede usar una imagen de fondo de 1 píxel de altura con repeat-xy 100% 100%posición:

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

Puede reemplazar el segundo 100%por algo más pxo empara ajustar la posición vertical del subrayado. También puede usar calcsi desea agregar relleno vertical, por ejemplo:

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

Por supuesto, también puede hacer su propio patrón base64 png con otro color, altura y diseño, por ejemplo, aquí: http://www.patternify.com/ - solo configure el ancho y la altura cuadrados en 2x1.

Fuente de inspiración: http://alistapart.com/article/customunderlines

— mcmimik
fuente
1

Si está utilizando text-decoration: underline;, puede agregar espacio entre subrayado y texto utilizandotext-underline-position: under;

Para obtener más información sobre las propiedades de posición de texto subrayado, puede mirar aquí

— Ifrah
fuente
0

Pude hacerlo usando la U (etiqueta de subrayado)

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
fuente
0

Esto es lo que 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
fuente
0

Lo que uso:

<span style="border-bottom: 1px solid black"> Enter text here </span>
— Francis Acosta
fuente
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.