I noticed the Responsive Nav site using an interesting technique to style the selection of its headings, so I thought I would re-create it here.

It’s actually very simple. Let’s say we have a Heading 1 tag in our markup:

This is My Awesome Heading

We just apply a transparent background and a text stroke to the heading using the ::selection pseudo-element. Note that text-stroke is currently only supported by WebKit browsers as of the writing of this post.

h1::selection {
  background: transparent;
  color: transparent;
  -webkit-text-stroke: 2px #ff9e2c;
}

That’s it! Highlight the text in the demo below to see it in action.

[codepen_embed height=”389″ theme_id=”279″ slug_hash=”ziqmc” default_tab=”result”]See the Pen Style Heading Selections by Geoff Graham (@geoffgraham) on CodePen.[/codepen_embed]