css - texto - text-decoration-line

Control de la posición del subrayado en la decoración de texto: subrayado

Question

¿Hay alguna forma de controlar la posición del subrayado en la decoración de texto: subrayar?

<a href="#">Example link</a>

El ejemplo anterior tiene un subrayado por defecto ... ¿hay alguna forma de empujar ese subrayado hacia abajo con unos pocos píxeles para que haya más espacio entre el texto y el subrayado?

Answer 1

Puedes usar pseudo antes y después así. Funciona bien y es completamente personalizable.

CSS

p {
  line-height: 1.6; 
}
.underline {
   text-decoration: none; 
   position: relative; 
 }   

.underline:after {
    position: absolute;
    height: 1px;
    margin: 0 auto;
    content: '''';
    left: 0;
    right: 0;
    width: 90%;
    color: #000;
    background-color: red;
    left: 0;
    bottom: -3px; /* adjust this to move up and down. you may have to adjust the line height of the paragraph if you move it down a lot. */
}

HTML

<p>This is some example text. From this page, you can <a href="#">read more example text</a>, or you can <a href="#" class="underline">visit the bookshop</a> to read example text later.</p>

Aquí hay una demostración más avanzada con una captura de pantalla adjunta que hice que anima el subrayado al pasar el ratón, cambia de color, etc.

http://codepen.io/bootstrapped/details/yJqbPa/

Answer 2

El uso de border-bottom-width y border-bottom-style hará que el borde tenga el mismo color del texto por defecto:

text-decoration: none;
border-bottom-width: 1px;
border-bottom-style: solid;
padding-bottom: 1px;

Answer 3

Existe la propiedad de text-underline-position en CSS 3, pero parece que todavía no se ha implementado en ningún navegador.

Por lo tanto, debería usar la solución alternativa de suprimir el subrayado y agregar un borde inferior, como se sugiere en otras respuestas.

Tenga en cuenta que el subrayado no se agrega a la altura total de un elemento, pero sí lo hace el borde inferior. En algunas situaciones, es posible que desee utilizar outline-bottom (que no se agregue a la altura total) en su lugar (aunque no es tan ampliamente compatible como border-bottom ).

Answer 4

Hay una propiedad text-underline-position: under . Pero solo se admite en Chrome e IE 10+.

Más información: https://css-tricks.com/almanac/properties/t/text-underline-position/ https://developer.mozilla.org/en-US/docs/Web/CSS/text-underline-position

Answer 5

La única forma de hacerlo es usar un borde en lugar de un subrayado. Los subrayados son notoriamente inflexibles.

a {
    border-bottom: 1px solid currentColor; /* Or whatever color you want */
    text-decoration: none;
}

Aquí hay una demo. Si no es suficiente espacio, puede agregar más fácilmente; si es demasiado, es un poco menos conveniente.

Answer 6

Use un borde inferior en lugar del subrayado

a{    
    border-bottom: 1px solid #000;
    padding-bottom: 2px;
}

Cambia el relleno del fondo para ajustar el espacio.

Answer 7

Yo usaría el borde en su lugar. Más fácil de controlar eso.