Как сделать пунктирную ссылку без border?

Question

[Sharapov]

Возможно ли сделать скриптовую (dotted) ссылку без border? Border уже занят для hover (на скриншоте).
Приходит в голову background-image, но для текста разной длины придётся делать разные background-image.

a.hmenu_city	{
	color: #FF0000; 
	text-decoration: none; 
	padding: 7px 10px 8px 30px; 
	border-radius: 4px; }

a.hmenu_city:hover, a:active	{
	background-color: #ffe3e3; }

Comments

[Bowen]

А заменить border на box-shadow ну а сам border использовать для решения этой задачи не пробовали?

[Сергей delphinpro]

Плюс в наличии еще есть ::before, ::after

[Сергей delphinpro]

а background-image можно и зарепитить, зачем разной длины картинки-то? (но так всё равно не делайте)

[Sharapov]

Bowen: Спасибо! Сработало! :)

[Sharapov]

Сергей: Спасибо

Answer 1

[Deleted Deleted]

Есть 2 стула.
Первый:

a {display:inline-block;position:relative;}
a:after {position:absolute;left:0;right:0;bottom:0;border-bottom:SZ dashed/dotted transparent;}
a:hover:after {border-color:#color;}

Второй:
a:hover {outline-bottom:SZ dashed/dotted #color;}

Answer 2

[Максим]

для elem:after , elem:before - делайте border:size dotted color;