Cómo crear un subrayado doble, punteado para texto en css

Question

¿Cómo podemos crear subrayado punteado doble en CSS? Uso la propiedad de borde inferior.

border-bottom: 1px dotted #oof

Pero sólo aparece subrayado sencillo de puntos. ¿Cómo podemos crear doble subrayado? Es posible ?

Answer 1

Es necesario utilizar al menos dos elementos HTML para lograrlo:

<span class="outer"> 
    <span class="inner">Your text here.</span> 
</span> 

Tanto .outer y .inner deben tener el mismo borde inferior de puntos, pero .outer deberían tener unos pocos píxeles de padding-bottom también.

See an example here.

Answer 2

Intenta agregar un div muy fino debajo de él y establece también el borde superior o el borde inferior 1px punteado. Luego puede jugar con el CSS en consecuencia para que se ajuste y hacer la doble línea punteada que desee.

Y no, no es posible hacerlo en el mismo elemento, tendrá que hacerlo desde el exterior.

Answer 3

Para ahorrarse con el marcado adicional, puede aplicar el borde adicional utilizando el pseudo elemento 'después'. ¡Mira el violín! - http://jsfiddle.net/sg2My/38/

.elem { 
    border-bottom:1px dotted #f00; 
    /* padding-bottom:1px;*/ 
    position:relative; 
} 

.elem:after { 
    border-bottom:1px dotted #000; 
    content:''; 
    left:0; 
    position:absolute; 
    bottom:-3px; 
    width:100%; 
} 

Además, puede valer la pena comprobar el artículo de Chris Coyiers la compatibilidad del navegador - http://css-tricks.com/9189-browser-support-pseudo-elements/

Answer 4

Definitivamente no necesitan dos elementos para hacer esto ...

.doubleUnderline{ 
    border-bottom: 3px double; 
}