Перекрытия текстого украшения

<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>

Я хотел span.comment иметь пунктирное красное подчеркивание, span.suggestion иметь пунктирное желтое подчеркивание и span с обеими .comment и .suggestion иметь точечное красное/желтое подчеркивание (одна точки красной, одна точки желтой , одна точка красная и т. д.)Перекрытия текстого украшения

Каким должен быть мой CSS? Возможно ли это с помощью text-decoration или border-bottom? Должен ли я использовать прозрачные изображения?

источник

2010-08-01 mak

Здесь нет вопросов. Вопросы заканчиваются вопросительным знаком (?). Это «plz send teh codez» – abelenky

Я понятия не имею, как это решить. Я надеялся, что кто-то по крайней мере направит меня в правильном направлении. – mak

Пунктирного подчеркивание может быть сделано со стилем границы:

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

Однако, как желтое и красное подчеркивание наклоняет быть сделано только с помощью CSS. Я предлагаю упростить его одного цвета (т.е. оранжевый)

источник

2010-08-01 02:44:24 tcooc

Упрощение его до одного цвета - хорошая идея. Благодарю. – mak

Использование вложенных <span> сек вы можете создать пунктирную границу с чередованием цвета:

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

Это будет немного сложнее сделать с точками, хотя.

источник

2010-08-01 03:37:01 Fraxtil

Перекрытия текстого украшения

ответ

Смежные вопросы