texto - subrayar enlaces css

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

Question

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

Answer 1

¡La respuesta del último niño 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 content a algo de la longitud correcta (es decir, el mismo

2. texto) establezca el color de fuente a 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;
}

Answer 2

El problema con el uso del border-bottom directamente es que incluso con el padding-bottom: 0 , el subrayado tiende a estar demasiado lejos del texto para verse bien. Así que todavía no tenemos el control completo.

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

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

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

Answer 3

Entrar en los detalles del estilo visual de text-decoration:underline de text-decoration:underline es bastante inútil, por lo que tendrá que ir con algún tipo de truco para eliminar text-decoration:underline y reemplazarlo con otra cosa hasta un momento mágico -Distente versión futura de CSS nos da 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;
}

• Ajuste los valores de% (81% y 85%) para cambiar la distancia a la que está la línea del texto
• Ajuste la diferencia entre los dos valores de% para cambiar el grosor de la línea
• ajuste los valores de color (# 222222) para cambiar el color de subrayado
• Funciona con múltiples elementos en línea.
• trabaja con cualquier fondo

Aquí hay una versión con todas las propiedades propietarias para algunas 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 usas SASS, la versión regular de arriba 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;
}

entonces utilízalo 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 Descenders

Si tiene un color de fondo sólido, intente agregar un text-stroke fino o text-shadow en el 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 ya ha sido retirado.

Answer 4

Esto es lo que yo uso:

html:

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

css:

.horizontal-line { border-bottom: 2px solid  #FF0000; padding-bottom: 5px; }

Answer 5

Lo que yo uso:

<span style="border-bottom: 1px solid black"> Enter text here </span>

Answer 6

Mira mi fiddle .

Necesitaría usar la propiedad de ancho de borde y la propiedad de relleno. Agregué un poco de animación para que se vea más genial:

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>

Answer 7

No, pero podría ir con algo como border-bottom: 1px solid #000 y 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: 1px y border-bottom-style: solid .

Para multilínea, puede envolver sus textos multilínea en un espacio dentro del elemento. Por ejemplo, <a href="#"><span>insert multiline texts here</span></a> luego agregue el border-bottom y el padding en la <span> - Demo

Answer 8

Pude hacerlo utilizando 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>

Answer 9

Puedes usar esta text-underline-position: under

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

Véase también la compatibilidad del navegador .

Answer 10

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

Answer 11

Si tu quieres:

• multilínea
• punteado
• con relleno de fondo personalizado
• sin envoltorios

subrayado, puede utilizar una imagen de fondo de 1 píxel de altura con la posición de repeat-x y 100% 100% :

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 como px o em para ajustar la posición vertical del subrayado. También puede usar calc si 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 png base64 con otro color, altura y diseño, por ejemplo, aquí: http://www.patternify.com/ - simplemente configure el ancho y la altura cuadrados en 2x1.

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

Answer 12

Una alternativa para los textos o enlaces de varias líneas, puede envolver sus textos en un espacio dentro de un elemento de bloque.

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

entonces puede simplemente 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/