How to Add Dotted Underlines to Hyperlinks

Posted by Lasantha Bandara on April 24th, 2015 File Under : css, html0 Comment

When you add a link into your webpage, normally your html code will look like this :

<a href="https://www.bloggertipandtrick.net/">Blogger Tutorials</a>

Result:

Blogger Tutorials

Depending on the CSS codes in your theme, you will see that link with or without a solid underline link.

Instead of a solid line, we can use dots to underline our links. To do this, we need to set the "text-decoration" and "border-bottom" style properties as below:

<a href="https://www.bloggertipandtrick.net/" style="text-decoration: none; border-bottom:1px dotted;">Blogger Tutorials</a>

Result:

Blogger Tutorials

File Under : css, html

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.