décorations texte Chevauchement

Question

<span id="case1" class="comment>text text</span> 
<span id="case2" class="suggestion">suggestion</span> 
<span id="case3" class="comment>text text <span class="suggestion">suggestion suggestion</span> text text</span> 

Je voudrais span.comment avoir souligné en pointillé rouge, span.suggestion d'avoir un soulignement jaune en pointillé et span à la fois .comment et .suggestion d'avoir un soulignement rouge/jaune pointillé (un point rouge, un point jaune , un point rouge, etc.)

Que dois mon regard CSS comme? Est-il possible avec la décoration de texte ou le fond de la bordure? Dois-je utiliser des images transparentes?

Answer 1

soulignements pointillées peut être fait avec un style de bordure:

span.comment {border-bottom: dotted 1px red;} 
span.suggestion {border-bottom: dotted 1px yellow;} 

Cependant, le soulignent à la fois jaune et rouge ne peux pas être fait avec seulement CSS. Je suggère simplificatrices à une couleur (c.-à-orange)

Answer 2

En utilisant <span> imbriqués s, vous pouvez créer une bordure en pointillés avec alternance de couleurs:

<span style="border-bottom: 3px solid #ff0"> 
    <span style="border-bottom: 3px dashed #f00"> 
    Lorem ipsum dolor sit amet... 
    </span> 
</span> 

Il serait un peu plus difficile à faire avec des points, cependant.