CSS: six ways to stylize HTML links

In this article I'd like to show you six effective ways to add a touch of style to your HTML links. The techniques presented here are really simple to implement. Let's see the details.

Using a different color

This is the simplest way to make your links different from the rest of the text:

a.color {
    color: #d34545;
}

Using a different color on hover

This technique adds a little bit of dynamism to your links when a user hovers them with the mouse:

a.hover {
    color: #800;
}
a.hover:hover {
    color: #f00;
}

Using a different background color on hover

Same as above, but this time we change also the background color of the links:

a.hover-bg {
    color: #003b6c;
}

a.hover-bg:hover {
    background: #003bc6;
    color: #fff;
}

Using text decoration

A dynamic effect on hover involving the text-decoration property:

a.decoration {
    text-decoration: none;
}

a.decoration:hover {
    text-decoration: underline;
}

Using borders

Another effect on hover but with the border-bottom property:

a.border {
    text-decoration: none;
    border-bottom: 1px solid;
}

a.border:hover {
    border-bottom: 1px dashed #008;
}

Using generated content

We can add a rounded bullet to our links when a user hovers them:

a.generate {
    text-decoration: none;
}

a.generate:hover:after {
    content: '>';
    margin-left: 4px;
    color: #000;
    font-weight: bold;
    display: inline-block;
    width: 20px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    background: #ccc;
    border: 1px solid #999;
    border-radius: 50%;
    text-shadow: 1px 1px 1px #444;
}

You can see the demo below.

Demo

Live demo