Как сделать пунктирное подчеркивание в CSS?

<style>

a {text-decoration:none;}

a span {border-bottom-style:dashed; border-bottom-width:1px;}

a:hover span {border-bottom-style:none;}

</style>



<a href="#"><span>текст ссылки</span></a>

Без спана:

<style>
a {
    text-decoration: none; 
    display: inline-block; 
    border-bottom-style:dashed; 
    border-bottom-width:1px; 
}
a:hover {
    border-bottom-style:none;
}
</style>

<a href="#">текст ссылки</a>

Спасибо огромное. Все работает.

Ну и в конце концов для обеспечивания кроссбраузерного идентичного результата пунктирное подчеркивание можно сделать с помощью background

В каком браузере не поддерживается border-bottom: 1px dashed red?

Вопрос не в поддержке, а в том как браузер отрендерит этот самый пунктир

Ок. Насколько существенна разница в отображении черточек в разных браузерах?

В данном случае несущественна, и даже настолько, что не стоит на этот счет заморачиваться. Я предложил всего лишь вариант и не в коем случае не настаиваю, что он единственный и правильный. Но иногда все же бывают ну очень придирчивые заказчики, которым подавай вёрстку до мулиметра

Предлагаю не общаться с такими :)

В таком случае заказчик должен вместе с сайтом получать откалиброванный монитор специально для просмотра сайта в той цветовой гамме, в которой он был нарисован дизайнером.