Nowadays a lot of web sites have their hyperlinks underlined with a dotted line instead of a plain line. In this small article you will learn how to do this effect.
Hyperlinks are usually presented with a plain line, and this line is not configurable with (X)HTML. For changing the presentation of a hyperlink, it is necessary to play with the CSS, but even though you cannot configure this line.
The trick to have a hyperlink with a dotted line is to remove the line! For doing so, you can use the style property text-decoration. This property has several possible values:
noneunderlineoverlineline-throughblink
You probably guessed that we choose the first of the values listed above:
<a href="http://www.korbinus.net" style="text-decoration: none">Hyperlink</a>
and the result looks like this:
Now we are using another property: border-style or in our case, border-bottom-style. This property has several possible values too:
nonehiddendotteddasheddoublesoliddoublegrooveridgeinsetoutset
As you guessed once again, we choose the third option:
<a href="http://www.korbinus.net" style="text-decoration: none; border-bottom-style:dotted;">Hyperlink</a>
and voilà ! here is the result:
But then it feels like the dots are too big. We are now using a property called border-bottom-width for reducing their size:
<a href="http://www.korbinus.net" style="text-decoration: none; border-bottom-style:dotted;border-bottom-width: 1px">Hyperlink</a>
and our hyperlink is finally trendy: