[Resolved] Link Questions (color and underlined)

[Meredith]

Hi Tom,

I was wondering if there is a way to make the Read More… links a different color than the rest of the links in the content. I would like the Read More… links to be a certain red (#de2a1e) but in my posts, I also plan to have bullet lists of many links, and don’t want those all red.

So…question number 2. I would like to make the links in the Content underlined to make it clear that they are links, since they will not be the link color red. I found some CSS you gave in a different forum thread, and it did underline my widget links (which made me very happy, thank you!), but how do I get to where the CSS underlines the links in the post content?

Here’s the CSS I put in Simple CSS (sorry, I lost the forum thread link):

.widget a {
text-decoration: underline;
}

If you need to view my site, it still has the same password protection I sent you–please let me know if I need to re-send it to you.

Thanks, Tom!

Meredith

[Tom]

Hi Meredith,

To underline, your CSS would be:

.widget a,
.entry-content a {
    text-decoration: underline;
}

You can target the read more link with this:

a.read-more

Hope this helps 🙂

[Meredith]

Thanks, Tom! I’ll try it…sorry for the delayed response, did not receive an email that you replied 🙂

[Tom]

No problem! 🙂

[Markus]

Hi Tom.

I tried to underline the visited links in the content only.

.entry-content a:visited {
    color: #123852;
    text-decoration: underline;
}

Funny, the color works, but no underline.

Any idea?

[Tom]

Looks like it’s not possible to underline visited links: http://stackoverflow.com/questions/10471929/underlining-visited-links

[Markus]

Tom, thank you for the hint.

It is possible, by doing something like this:

/*underline*/
.entry-content a:visited {
    color: #black;
    border-bottom: 1px solid;
    border-bottom-color: #black;
}
.entry-content a:visited:hover {
    color: #red;
}
.entry-content a:link {
    border-bottom: 1px solid;
    border-bottom-color: white;
}

[Tom]

Yep, using border would be the workaround.

Glad you found a solution 🙂

[Author]

Posts