Cómo agregar un subrayado con puntos debajo del texto HTML

96

¿Cómo se subraya el texto html para que la línea debajo del texto tenga puntos en lugar del subrayado estándar? Preferiblemente, me gustaría hacer esto sin usar un archivo CSS separado. Soy un novato en html.

html underline parap
fuente
13
¿Por qué no puedes usar CSS? ¿Quizás crear la página como una imagen y agregar la línea con mspaint?
epascarello
No creo que se pueda hacer sin CSS
Cfreak
Tienes que usar css, pero se podría hacer usando imágenes de fondo, el borde inferior es el mejor enfoque
kingdomcreation
4
Tipos. Creo que dijo "sin usar un archivo CSS separado", no "sin CSS". Adora a los novatos.
Stefan Reich

Respuestas:

138

Es imposible sin CSS. De hecho, la <u>etiqueta simplemente se agrega text-decoration:underlineal texto con el CSS integrado del navegador.

Esto es lo que puede 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>
Alfred Xing
fuente
En su <head>elemento, agregue una <style>etiqueta (he editado mi respuesta)
Alfred Xing
2
también puedes probar en dottedlugar dedashed
Brian Burns
Buena solución y es posible. No me hagas codificar js para eso;)
Ahmet Can Güven
Aquí está la respuesta con soporte de texto de varias líneas stackoverflow.com/a/4365458/1078641
electroid
32

Utilice los siguientes códigos CSS ...

text-decoration:underline;
text-decoration-style: dotted;
Shakeel Ahmed
fuente
3
Esta debería ser la respuesta aceptada. Siguiendo el modelo de caja, el uso de un punteado borderse colocará fuera paddingy, por lo tanto, estará distante del texto.
Ryan Walker
2
Hay una sintaxis corta: text-decoration: underline #000 dotted;donde el primer atributo es la línea, el segundo es el color y el tercero es el estilo.
Sos Sargsyan
Gracias Sos por la mejora
Shakeel Ahmed
15

Sin CSS, básicamente estás atascado con el uso de una etiqueta de imagen. Básicamente, haz una imagen del texto y agrega 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; 
}

Ejecución de ejemplo

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>
epascarello
fuente
10

El elemento HTML5 puede dar un subrayado con puntos, por lo que el texto de abajo tendrá una línea de puntos en lugar de un subrayado normal. Y el atributo de título crea una información sobre herramientas para el usuario cuando coloca el cursor sobre el elemento:

NOTA: El borde punteado / subrayado se muestra de forma predeterminada en Firefox y Opera, pero IE8, Safari y Chrome necesitan una línea de CSS:

<abbr title="Hyper Text Markup Language">HTML</abbr>
Fátima Waheed
fuente
Esta es la respuesta correcta. Corto y sin CSS. Gracias.
Saeed Ahadian
Con HTML5, esta debería ser la respuesta aceptada.
perry hace
4

Si el contenido tiene más de una línea, agregar un borde inferior no ayudará. En ese caso, tendrás que usar,

text-decoration: underline;
text-decoration-style: dotted;

Si desea más espacio para respirar entre el texto y la línea, simplemente use,

text-underline-position: under;
Darshana Gunawardana
fuente
3

Reformateó la respuesta por @epascarello :

u.dotted {
  border-bottom: 1px dashed #999;
  text-decoration: none;
}
<!DOCTYPE html>
<u class="dotted">I like cheese</u>
Expandir fragmento

anatoly techtonik
fuente
0

Puede usar la parte inferior del borde con la dottedopción.

border-bottom: 1px dotted #807f80;
Neel
fuente
0

Puedes probar este método:

<h2 style="text-decoration: underline; text-underline-position: under; text-decoration-style: dotted">Hello World!</h2>

Tenga en cuenta que sin text-underline-position: under;usted todavía tendrá un subrayado punteado, pero esta propiedad le dará más espacio para respirar.

Esto es asumiendo que desea incrustar todo dentro de un archivo HTML usando estilo en línea y no usar un archivo o etiqueta CSS separado.

Mona Jalal
fuente
-2

No es imposible sin CSS. Por ejemplo, como elemento de lista:

<li style="border-bottom: 1px dashed"><!--content --></li>
Davington III
fuente
6
Es imposible sin CSS. El styleatributo es simplemente una forma de aplicar propiedades CSS directamente a un elemento. Consulte los documentos de MDN sobre el atributo de estilo.
mirichan
Agregar CSS de esta manera es una forma de pensar de manera efectiva en el estilo html. Por supuesto, puede argumentar que no existe tal cosa, pero para un método fácil de describir, esta es una posible solución.
Davington III
Sin embargo, sigue siendo CSS, y la preferencia real que se dio fue no tener un archivo separado. La mejor manera de resolver el problema con esa restricción es <style>. Los estilos en línea deben usarse con bastante moderación.
mirichan
Bueno, en el momento en que creé esa publicación fue porque tenía que usar estilos en línea. Me pareció que valía la pena señalar esa posibilidad a otros en mi caso, en caso de que no lo hubieran pensado, no es realmente un tema apropiado para la guerra y la paz ... Presumiblemente encontraron lo que necesitaban y nuestras sugerencias están ahí para aquellos y cualquier otro que pueda los necesito, cuando publico desde el trabajo no tomo en cuenta a alguien que señala algo que ya es obvio sobre la sugerencia cuando es una sugerencia, no un "debes hacerlo de esta manera", así que sí, tómate una pastilla para el
descanso,
1
Confundes mis intenciones. Estaba haciendo una observación técnica relevante a la pregunta formulada. No tenía ninguna intención de llamarte, y me disculpo por haberlo visto de esa manera.
mirichan