How to create a dotted line for hyperlink in CSS
I ran across a website that used dashes to underline it’s hyperlinks which I thought was a bit different and eye appealing as well. I have used this now on my blog titles. I was going to update the hyperlinks within my blog too, but found that it made the screen look too busy.
I found out that the person was using the border feature in their CSS. This blog assumes that you already know a little bit about CSS. Whether you’re experienced or not, the first thing you should do is backup your CSS before making changes to it. You can really do harm to your website by misconfiguring your CSS.
First, locate your CSS. It should be located in the <webroot>/wp-content/themes/<yourtheme>/
Second, locate the selector that you wish to update (ie. “.post a:link“)
Third, add the following lines below:
- border-bottom: #666666;
- border-width: 0px 0px 1px 0px;
- border-style: none none dotted none;
Now, re-upload your newly updated CSS to your site and test it out.
There is a great tutorial explaining CSS at W3Schools which gives other examples of border types such as: dashed, solid, double, groove, ridge, inset, and outset.
Good luck!
Filed Under: Wordpress
Hey – great information…. I thought I would add that the “border-width” settings you have here are default, so you can leave that line out unless you want to change them. The “border-bottom” is the color (which defaults to a blue color).
If you want to play with where the dotted line is displayed or how thick the line is you just change the “0px 0px 1px 0px” settings. The px number is the thickness of the line (0= no line, 1= thin, etc). The order is Top, Right, Bottom, Left. so in the example here its 0 on top, 0 to the right, 1px on the bottom, and 0 on the left. If you wanted to REALLY make your links standout try something like 10px 10px 10px 10px.