Genesis - Change link styles

In this tutorial, we'll go over different ways that you can customize the appearance of links within your blog posts.

To add any of these code snippets to your theme, copy the snippet and paste it at Appearance > Customize > Additional CSS.

Add underline to links

This will add an underline to your links. The underline will be the same color as your link color.

.single .entry-content p a,
.single .entry-content li a {
    text-decoration: underline;
}

Add bottom border to links

This will add a border under your links (similar to an underline), but this will allow you to set its color separately from the link color.

.single .entry-content p a,
.single .entry-content li a {
    border-bottom: 1px solid #000000;
}

Change #000000 to your preferred border color.

Add background color to links

.single .entry-content p a,
.single .entry-content li a {
    background: #EDDFDA;
}

Change #EDDFDA to your preferred background color.

Optional – you can also add a different background color on hover:

.single .entry-content p a:hover,
.single .entry-content li a:hover {
    background: #E1CBC4;
}

Make links bold

.single .entry-content p a,
.single .entry-content li a {
    font-weight: bold !important;
}

Make links *not* bold

Use this if the links in your theme are bold by default and you'd like them to be a normal weight.

.single .entry-content p a,
.single .entry-content li a {
    font-weight: normal !important;
}