Creating A Text/Cursor Style Highlighted Effect With CSS

There are many ways of making text stand out on a website. Standards such as bold, underline, italics and so on are used worldwide. A slightly less common effect is the highlight, which makes it look like text has been highlighted by a cursor.

It’s fairly simple in its implementation, but there’s a couple of tweaks which can be made to smooth out rough edges, and give it a little extra punch. Just like that.

(If you’re looking for the CSS to achieve this, you can skip the blurb and scroll down to the bottom…)

Inline layout

The highlighted text needs to be styled as an inline element. Using either inline-block or block will result in the text rendering as one large block

This text is highlighted as a block element. The text will highlight, but on a line break,
the background will continue right up to the edge.

display: inline;
background: #DDD;

We’re looking for something a little more like this paragraph, where the text background runs on with the characters, but doesn’t extend to the left or the right of the column. An element with display: inline works perfectly for that.

Extending the sides

Standard selected text, when highlighting within a webpage, sits pretty tightly within the selection background. You can see that above, where the text sits flush with the side of the page. This is intentional when highlighting using a keyboard or mouse – it allows for the text to be highlighted without interfering with the layout.

I wanted to create a slightly more punchy effect though, and to do so I wanted to add some space to the left and right of the highlighted text so that it still looked visually pleasing, rather than purely functional as a highlight would be.

A standard inline element doesn’t play nicely with margins though. Trying to place a left- or right- margin on the text works fine when it’s on a single line. But lets look at how this functions on paragraph text.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam at venenatis nisi, quis tristique odio. Duis vehicula urna a libero maximus tristique. In aliquet, sapien non cursus volutpat, mi velit tempor dolor, sed ultrices massa arcu vitae nunc. Nulla feugiat mi arcu, at hendrerit velit imperdiet et. Aenean viverra maximus nibh.

Not what I’m after here – I want to have an equal padding on all lines of the text.

Box Shadow

A nifty way of achieving this is in the use of the box-shadow rule. Box shadow applies to all sides of an inline element, and by default, gives us something pretty close to margin above.

background: #DDD;
color: #000;
box-shadow: 6px 0 0 #DDD, -6px 0 0 #DDD;

But on its own, this produces text which runs up against the edge of the background colour on subsequent lines. See how on this paragraph, the second line starts flush against the edge? It’s pretty much the same issue as encountered when using margin.

To fix this, we also need to make use of the lesser known CSS rule, box-decoration-break that defines how a box styling rule applies when the element is fragmented (i.e. across multiple lines)

In this case, we’ll add

box-decoration-break: clone

Where clone states that we want each individual line to render with the same styling as the previous and vice versa, i.e. with a margin on both the left and right hand sides. Adding that in gets our background rendering just like this

Positioning

Now, you might have noticed that the text background hangs over the left-hand side of the column. This is an expected effect of using the box-shadow property. The box-shadow doesn’t respect the same positioning rules as the inline-element, and will render wherever on the page is appropriate.

To sort this, we’ll apply a position rule, to shift our block of text 6px right (where 6px is the size of our shadow). And, we’ve also placed a compensatory margin to the right of the element to make up for the fact that we’ve nudged an entire chunk of text a few pixels to the right. Otherwise, the highlight would cover the following text.

I’ve also added a 2px padding to the top and bottom of the highlighted section to make it really stand out.

Now, you’ll likely see that there is a bit of a gap between the words at the start and end of the highlight. I personally rather like this effect. The visual "break" formed by the start and end of the highlighted text offsets this, I feel.

You can mess about with the spacings yourself, but to me at least, the gap provides another nice visual pause, breaking up the flow of the sentence and lifting the highlighted portion slightly more.

Also, due to the position nudging the text over 6px, it overhangs the column to the right slightly, haven’t figured out a way to resolve that neatly yet, but for the use case – applied to short snippets of text – I think it’s a price worth paying.

display: inline;
box-decoration-break: clone;
background: #DDD;
color: #000;
box-shadow: 6px 0 0 #DDD, -6px 0 0 #DDD;
position: relative;
left: 6px;
margin-right: 12px;
padding: 2px 0;

So, there it is – once applied to an inline element, the final result should look a little something like this and will behave nicely across multiple lines. The extra padding gives it a little more emphasis than a standard "highlight" and creates a fairly visually arresting effect. If used sparingly, it can really help make key comments and phrases pop out of a page.

Try experimenting with different background and text colours.