CSS subrayado texto donde el subrayado es de un peso menor que el texto?

Tratando de subrayar un encabezado, pero lo tienen como una línea mucho más delgada que el texto en negrita de arriba, ¿cómo hago esto?CSS subrayado texto donde el subrayado es de un peso menor que el texto?

De 'googlear' es la respuesta EFS que esto debería funcionar (pero no lo hace):

<span style="text-decoration:underline; font-weight:normal;"> 
    <span style="text-decoration:none; font-weight:bold; font-family:Arial; font-size:16pt;"> 
     Basic Transfer 
    </span> 
</span>

Así que para recapitular, texto grande, subrayado delgada, ¿cómo?

O más al grano, ¿dónde me estoy equivocando?

Gracias, R

Fuente

2009-10-21 flavour404

El problema de subrayado en negrita parece deberse a la fuente Arial. Pero tu ejemplo/solución funciona para mí (Firefox 18). – Nicolas

Posible duplicado de [¿Cómo cambiar el grosor del subrayado de una etiqueta a sin usar borde?] (Http://stackoverflow.com/questions/34047471/how-to-change-underline-thickness-of-an-a-tag -sin-usar-borde) –

¿Qué tal un borde inferior?

<h2 style="border-bottom:1px solid #000;">basic transfer</h2>

Por supuesto que no debe utilizar inline-css.

Fuente

2009-10-21 01:19:10

Buena idea +1 – spender

El único problema es que el subrayado 'borde' es un poco bajo, ¿hay alguna manera de abordar esto? – flavour404

¿Eh? Relleno inferior? ¿Puedes mostrar una imagen del resultado deseado? Odio adivinar lo que quieres. –

La respuesta de Meder es un buen enfoque general, pero tenga cuidado: para h2 y otros elementos del bloque, usar un borde para simular un subrayado no funcionará del todo. Si el texto se ajusta, solo se subrayará el borde inferior del cuadro delimitador. Incluso si no lo hace, el borde se extenderá hacia la derecha más allá del final del texto. Debe envolver el texto en un lapso y aplicarle un estilo al lapso.

<h2><span style="border-bottom:1px solid #000;">basic transfer</span></h2>

Fuente

2009-10-21 01:38:46

Lo resolví. :)

Si utiliza el enlace dentro de una li A continuación, puede utilizar este tipo de css:

HTML:

<li><a href="#">Inspiration</a></li>

CSS:

#theMenu li{ 
    font-weight: 100; 
    text-decoration: underline; 
    color: red; 
    font-size: 0.94em; 
} 

#theMenu a{ 
    text-decoration: none; 
    font-weight: bold; 
}

Esto hará que la línea debajo del enlace delgado, y el texto del enlace en negrita.

Fuente

2012-01-06 22:37:19 Alisso

CSS subrayado texto donde el subrayado es de un peso menor que el texto?

Respuesta

Cuestiones relacionadas