Espaciado entre texto y subrayado... ¿Se puede con CSS?

Chorchao · #1 (**permalink**) 24/05/2007, 08:34

Me gustaria saber si es posible generar un espacio entre un texto y su subrayado usando CSS.

Gracias

Daniel Ulczyk · #2 (**permalink**) 24/05/2007, 15:07

Hasta donde tengo entendido, no lo podés hacer; aunque sí se puede simular el efecto mediante la siguiente técnica:

Código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Test de un pseudo-subrayado</title>
<style type="text/css" media="screen">
p {
    font: Verdana, Geneva, Arial, Helvetica, sans-serif;
    font-size: 20px;
    line-height: 30px;
}

.subrayado {
    border-bottom: 1px solid #000000;
    padding-bottom: 3px;
}
</style>
</head>
<body>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque justo orci, sollicitudin ultrices, facilisis eget, venenatis at, felis.</p>
<p><span class="subrayado">Subrayado especial</span><u> y subrayado standard</u></p>
<p>Fusce vel elit eu sem pellentesque tristique.</p>
</body>
</html>

Considerá que para aumentar la distancia texto-línea deberás aumentar también line-height