Of course, links are ugly as hell. We're all sorry. If you want to do something about it, venture into the sketchy world of replacing underlines with borders on the anchor tag.
Your journey starts with a {text-decoration: none; }, which is usually the beginning of bad things. Hey, it can be fine. It can be just fine. Maybe it's something that's obviously a link and doesn't need to be underlined. A button, for example. That's great. But if it's inside a piece of text, and it's also a piece of text, you're venturing into the dark woods of anchor styling. But it's OK.
Obviously, underlines should have been styleable from the beginning. But they weren't. It must be the same colour as the text. It must be a certain width (too thick). It must be a certain distance from the text. Of course. As with many things in life, rigidity can often lead to transgression. So as with most of those things, we must be careful in how we transgress.
First I'll let you know what you can get away with, and what the limitations are: You can totally change the colour, width, and space from the text, of your wonderful new underline. You can make it dotted or dashed instead of solid. That's super cool. But there's one thing: if the link wraps to a new line, or if it's a whole paragraph that's linked, that's a problem. Only the bottom of it will have the underline. So you'll have a block of text with a line underneath it. So this is for the kind of links where you don't want them to wrap to a new line anyway. I find that there are a lot of links like that. You want the links to display as their own title, all together, the link is not terribly long, and it's better if it causes a line break before it than one in the middle. So assuming all those things are cool, here's how you do it:
a {
text-decoration: none;
border-bottom: 1px solid;
line-height: 0.9em;
display: inline-block;
white-space: nowrap;
}
That's it. Change the colour of the underline by adding a colour after "solid" in the "border-bottom" thing. Change the thickness of the line by changing the "1px" thing. Make it dotted by replacing the word "solid" with the word "dotted," or "dashed," if you want to do that. That's actually a useful thing if you've got a site with a few different kinds of links on it. Let's say, all your offsite links are dotted lines. Or all your in-site links. And users are ready to learn the difference.
You can change the distance between the underline and the word above it by changing the "0.9em" thing in the "line-height" thing.
So in terms of colour, it'll automatically match the colour of the text, so that's nice. That's convenient. But if you want to make the underline colour different from the text colour, then you're specifying an underline colour, so then you'll have to specify an underline colour for your a:visited state as well. At the very least. Don't, please, don't, just... don't make your visited links and your unvisited links identical in style. I mean, okay, fine, maybe. But generally, don't. Just find a colour that's nice. And force the element state or whatever you have to do when you're demonstrating it to your client or whoever. If they're usability-hostile. Which they probably are. But please. C'mon. Don't make people wonder where they are in a big list of things of yours that they're checking out. Like your portfolio items. I know you want as few different styles as possible. Just find a way to make them different that's good. That you like. Overthink it, if that's what you think that is, then go ahead and overthink it.
Okay, love you, have a good one...
-Dorian
