Editar el grosor de línea del atributo ‘subrayado’ de CSS

Solución:

Aquí hay una forma de lograrlo:

HTML:

<h4>This is a heading</h4>

<h4><u>This is another heading</u></h4>

CSS:

 u {
    text-decoration: none;
    border-bottom: 10px solid black;
  }​

Aquí hay un ejemplo: http://jsfiddle.net/AQ9rL/

Recientemente tuve que lidiar con FF, cuyos subrayados eran demasiado gruesos y demasiado alejados del texto en FF, y encontré una mejor manera de lidiar con eso usando un par de sombras de cuadro:

.custom-underline{
    box-shadow: inset 0 0px 0 white, inset 0 -1px 0 black
}

La primera sombra se coloca encima de la segunda y así es como puede controlar la segunda variando el valor ‘px’ de ambas.

Además: varios colores, grosor y posición de subrayado

Menos: no se puede usar en fondos no sólidos

Aquí hice un par de ejemplos: http://jsfiddle.net/xsL6rktx/

Muy fácil … fuera del elemento “span” con letra pequeña y subrayado, y dentro del elemento “font” con un tamaño de letra más grande.

<span style="font-size:1em;text-decoration:underline;">
 <span style="font-size:1.5em;">
   Text with big font size and thin underline
 </span>
</span>

---

---

Utiliza Nuestro Buscador