Adam Schwartz

No doubt, at a certain point it does come down to aesthetic preference.

Using a border-bottom to achieve the look you’re describing is totally a valid preference. One potential advantage to the border-bottom technique is
the way it can be used to make a link stand out. In fact, I use this link styling on my personal website for that reason [1].

(Note: when using a border-bottom, I’d recommend using a slightly larger line-height so that the line still seems associated with the text above it and not the text below it. This is one of the pitfalls described in the original Medium post [2].)

Unfortunately, aside from iOS 8, normal text-decoration underline links have the descender crossing problem.

I absolutely took this into consideration when designing SmartUnderline. SmartUnderline literally only applies itself to links with text-decoration underline, nothing else. It even tries to ensure other conditions which make the transformation favorable (display inline, solid background color, etc.).

Ultimately I think the before-and-after on the SmartUnderline website tells the best story [3]. No doubt one may appreciate other, very different link styles. (For example, just using a different text color to denote _link_ is a perfectly valid and commonly used technique.) But if you’re using text-decoration underline already, this just makes those links look better.

I think blogs, news articles and wikis are some of the primary examples of where these links look best. Anywhere…

Adam Schwartz's Magic of CSS has a nice trick for getting the same effect without needing a custom font.

See it in action at http://adamschwartz.co/magic-of-css/potions/two-pane-app/

The relevant CSS is in http://adamschwartz.co/magic-of-css/css/potions.css:

.mock-paragraph b {
display: -moz-inline-stack;
display: inline-block;
vertical-align: middle;
*vertical-align: auto;
zoom: 1;
*display: inline;
background: rgba(0, 0, 0, 0.1);
width: 3.125em;
height: 0.5em;
margin-right: 0.3125em;
margin-bottom: 0.3125em; }
.mock-paragraph b:nth-last-child(4n+1) {
width: 4.5625em; }
.mock-paragraph b:nth-last-child(10n+1) {
width: 0.875em; }
.mock-paragraph b:nth-last-child(9n+1) {
width: 5em; }

Thanks! I don't know of anything to speak of like Tony's courses but they look great and I will try them.

http://adamschwartz.co/magic-of-css/ This material, while not a course per se, was really integral to me understanding just how CSS works at a foundational level. The interactivity was very helpful to me.

https://www.udacity.com/course/intro-to-html-and-css--ud304 If you are really at a true beginner level, Udacity's Intro to HTML and CSS was phenomenal, and free. They cover everything I think you need to really get started, and as you seemed to enjoy the video material, I imagine you will enjoy this.