Fixing Styles on `code` Tags Nested Inside Links

One thing that’s common in development blog posts and documentation is the use of HTML’s <code> tags to mark up code snippets inline and in large blocks (the latter of which is usually done along with <pre> tags).

One of the problems that occurs with styling of <code> tags, however, is when they’re used inline inside of links (or <a> elements).

The CodePen demo below demonstrates the problem that I’m talking about:

See the Pen Testing code tags inside anchor tags by Louis Lazaris (@impressivewebs) on CodePen.

The first paragraph includes code terms that are wrapped in <code> tags, and the styling for inline code examples is evident. There’s a custom background color, monospace font, and even some padding added to the inline element.

But in the second paragraph is where the problem occurs. There are not only inline code examples wrapped in <code> tags, but those same <code> tags are nested inside of links (i.e. <a> tags). The styling for the <code> tags remains, but there is no indication that this part of the sentence is hyperlinked because the <code> tag styling has overtaken the <a> tag styling.

Not only does it look ugly (because single links appear to break up into multiple links) but if nothing is hyperlinked except the <code> tags, it’s even worse because the link then becomes invisible. Also, try hovering over the links in the demo’s second paragraph and you’ll see that the text-decoration makes it even worse.

Some blogs and CSS frameworks get it wrong

This is a common problem on many major blogs and websites, and even in popular CSS frameworks.

Here’s how this looks on Smashing Magazine:

And on SitePoint:

A List Apart almost gets it right, until you hover over the link and the text-decoration appears broken up:

Not terrible, but it could be better.

Note: I created those examples myself live on the different sites, with browser developer tools. It was just easier than hunting down real examples.

What about popular CSS frameworks? Let’s look at two CodePen examples that show the out-of-box handling of <code> tags inside of links in Bootstrap and Foundation.

First, here’s Bootstrap 3 using the same content as the previous demo:

See the Pen Testing code tags inside anchor tags in Bootstrap 3.x by Louis Lazaris (@impressivewebs) on CodePen.

And here’s Bootstrap 4 Alpha:

See the Pen Testing code tags inside anchor tags in Bootstrap 4.x by Louis Lazaris (@impressivewebs) on CodePen.

Finally, here’s Foundation for Sites:

See the Pen Testing code tags inside anchor tags in Foundation 6.x by Louis Lazaris (@impressivewebs) on CodePen.

In all three cases, we have the same basic problems:

• The single link appears to be broken up into multiple links with a code snippet in between
• When you hover over the link, the underline is broken up because of padding added to the <code> element
• If the <code> element is the only thing linked, you can’t differentiate a linked <code> element from a non-linked one.

Fixing it using the inherit keyword

In a lot of cases, it’s easy to fix this problem because it’s the perfect use case for CSS’s inherit keyword, which is a CSS feature that has been around for ages but was not very widely used because it had no support in IE7 and below.

We can add the following CSS to all of the above examples and it will fix the problem:

a code {
  background: inherit;
  color: inherit;
  padding: inherit;
}

In the case of Foundation’s stylesheet, you also have to add border: inherit if you want to remove a light grey border that’s added, but either way it will look much better when the background, text color, and padding values are all reset.

Here is a corrected version of the original demo that uses inherit to fix the issue:

See the Pen Testing code tags inside anchor tags (corrected with inherit) by Louis Lazaris (@impressivewebs) on CodePen.

Because <code> and <a> are both inline tags, technically a developer could nest them the other way around, but I’d suggest to always nest them starting with <code> so you don’t have to deal with that too.

Fixing it using the child combinator

If you’re building a stylesheet from scratch and aren’t dealing with any inherited styles yet, you can solve this problem using CSS’s child selector (>). And this is exactly what Chris Coyier does on CSS-Tricks in order to deal with this problem:

As you can see, CSS-Tricks corrects the problem from the outset by declaring the inline code styles only on <code> elements that are direct children of the specified elements, including <p>. So instead of using the inherit technique, you can do something like this:

p>code, li>code, dd>code, td>code {
  background: #eee;
  padding: 0 3px;
  /* etc.... */
}

On CSS-Tricks, I believe the only style that remains on the <code> element when it’s a child of a link is the font-family declaration. This is a logical way to do it because you still get the consistent color, underline, and no padding, while maintaining a distinction from the rest of the link.

Here’s the original demo corrected using this technique:

See the Pen Testing code tags inside anchor tags (corrected with child combinator) by Louis Lazaris (@impressivewebs) on CodePen.

Fixing it by omitting the color property

Finally, I’d like to also mention that they do a nice clean job of this on the Tuts+ website:

In that case, they’re not using either of the above techniques, but instead they omit the color property when defining styles for <code> elements. This way, the <code> elements inherit the color from the <a> element. That solution won’t work for everyone because I find many code bases require a specific font color on the <code> element due to the element’s background color and other style choices on the page. But that’s definitely another way to do it.

Conclusion

Overall, this is not a really big deal because it’s rare to find an inline code sample inside an anchor tag. But I think frameworks like Bootstrap and Foundation should definitely fix this.

I recently fixed it here on my site, which you can see in this very sentence, which links to MDN’s article on the <code> element.