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

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