Styling <code> within an anchor element

I faced a snag in one of my recent projects, while styling a <code> element within a <a> element. The project uses Markdown to write contents, and uses Eleventy to render contents into HTML pages.

In Markdown, you write the code within an anchor like:

[`box-sizing`](https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing)

…and, it generates HTML like:

<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing"><code>box-sizing</code></a>

We were styling all <a> elements with an underline, and all code elements with a light background colour. When putting them together, we didn’t want the code elements within <a> to have an underline, instead a border to indicate that it is clickable. Seems straightforward and we wrote the code:

CSS

.fail-demo-prose a {
  color: rgb(139, 92, 246);
  text-decoration: underline;
}

.fail-demo-prose a:hover,
.fail-demo-prose a:active,
.fail-demo-prose a:focus {
  text-decoration: none;
}

.fail-demo-prose a code {
  padding: 0.0625em 0.25em;
  border: 1px solid;
  background: rgb(237, 233, 254);

  text-decoration: none; /* 😢 This don't work! */
}

.fail-demo-prose a:hover code,
.fail-demo-prose a:active code,
.fail-demo-prose a:focus code {
  color: rgb(237, 233, 254);
  background-color: rgb(139, 92, 246);
  border-color: rgb(139, 92, 246);
}

/* Presentational styles */
.fail-demo-prose > * + * {
  margin-top: 1em;
}

.fail-demo-prose code {
  text-shadow: none;
}

HTML

<div class="fail-demo-prose">
  <p><a href="#">A regular link</a></p>
  <p><a href="#"><code>'code' element within a link</code></a> 😢</p>
</div>

Preview

A regular link

'code' element within a link 😢

But, the underline on the code is still there! Bummer.

That’s when we learned the text-decoration is applied to all descendant inline text elements. And, styling child elements with text-decoration: none would not cause any change.

And we figured the fix is to make the <code> an inline-block! If you like to know why this works, go over the CSS spec.

CSS

.demo-prose a {
  color: rgb(139, 92, 246);
  text-decoration: underline;
}

.demo-prose a:hover,
.demo-prose a:active,
.demo-prose a:focus {
  text-decoration: none;
}

.demo-prose a code {
  display: inline-block; /* 🔨 Whack! */
  padding: 0.0625em 0.25em;
  border: 1px solid;
  background: rgb(237, 233, 254);

  /* text-decoration: none; */ /* 👀 This is not required any more. */
}

.demo-prose a:hover code,
.demo-prose a:active code,
.demo-prose a:focus code {
  color: rgb(237, 233, 254);
  background-color: rgb(139, 92, 246);
  border-color: rgb(139, 92, 246);
}

/* Presentational styles */
.demo-prose > * + * {
  margin-top: 1em;
}

.demo-prose code {
  text-shadow: none;
}

HTML

<div class="demo-prose">
  <p><a href="#">A regular link</a></p>
  <p><a href="#"><code>'code' element within a link</code></a> 🎉</p>
</div>

Preview

A regular link

'code' element within a link 🎉