tamaño - Cómo agregar un subrayado punteado debajo del texto HTML
subrayado html5 (6)
El elemento HTML5 puede proporcionar subrayado punteado, por lo que el texto debajo tendrá línea punteada en lugar de subrayado regular. Y el atributo de título crea una información sobre herramientas para el usuario cuando coloca su cursor sobre el elemento:
NOTA: El borde punteado / subrayado se muestra por defecto en Firefox y Opera, pero IE8, Safari y Chrome necesitan una línea de CSS:
<abbr title="Hyper Text Markup Language">HTML</abbr>
¿Cómo se resalta el texto html para que la línea debajo del texto esté punteada en lugar del subrayado estándar? Preferiblemente, me gustaría hacer esto sin usar un archivo CSS separado. Soy un novato en html.
No es imposible sin CSS. Por ejemplo, como un elemento de la lista:
<li style="border-bottom: 1px dashed"><!--content --></li>
Reformateó la respuesta por @epascarello :
u.dotted {
border-bottom: 1px dashed #999;
text-decoration: none;
}
<!DOCTYPE html>
<u class="dotted">I like cheese</u>
Sin CSS, básicamente estás atascado con el uso de una etiqueta de imagen. Básicamente haga una imagen del texto y agregue el subrayado. Eso básicamente significa que su página es inútil para un lector de pantalla.
Con CSS, es simple.
HTML:
<u class="dotted">I like cheese</u>
CSS:
u.dotted{
border-bottom: 1px dashed #999;
text-decoration: none;
}
Página de ejemplo
<!DOCTYPE HTML>
<html>
<head>
<style>
u.dotted{
border-bottom: 1px dashed #999;
text-decoration: none;
}
</style>
</head>
<body>
<u class="dotted">I like cheese</u>
</body>
</html>
Use los siguientes códigos CSS ...
text-decoration:underline;
text-decoration-style: dotted;
Es imposible sin CSS. De hecho, la etiqueta <u> simplemente agrega text-decoration:underline el texto con el CSS incorporado del navegador.
Esto es lo que puedes hacer:
<html>
<head>
<!-- Other head stuff here, like title or meta -->
<style type="text/css">
u {
border-bottom: 1px dotted #000;
text-decoration: none;
}
</style>
</head>
<!-- Body, content here -->
</html>