How to make dashed link without border?

Question

css

Is it possible to make a scripted (dotted) link without a border? Border is already taken for hover (in the screenshot).
Background-image comes to mind, but for text of different lengths, you will have to do different background-images.

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

Answer 1

There are 2 chairs.
First:

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

Second:
a:hover {outline-bottom:SZ dashed/dotted #color;}

Answer 2

for elem:after , elem:before - do border:size dotted color;

Answer 3

there can be several borders