How to Replace Text with CSS

Replacing text with CSS is not something I use often, but there are some specific cases where it comes in handy. If you have the ability to change text on the server-side, I always recommend that first. CSS text replacement should be a last resort, as that is not what CSS is intended for.

If you’re working within the limitations of a CMS, or you don’t have the ability to change your markup, CSS text replacement might be your only option.

There are a few ways to handle it. Let’s walk through the options, and explain how they work, and why other methods fail.


Add Line Breaks to CSS Generated Content

You’re probably familiar with CSS generated content, and how it is used in conjunction with the :before & :after pseudo-elements. Maybe you read our article on replacing text with CSS.

A common question we get is, “How can I add a line break to my CSS content?”

Good news! Line breaks are possible with CSS, but there’s a little more to it than just inserting an entity conversion code into your content declaration.


Customizing mailto: Links

If you’ve ever wondered how to customize a mailto: link, getting it to include your own subject line, list of recipients, cc or bcc someone, and pre-populate a message in the email body… look no further.

First, let’s look at a standard mailto: link.

<a href=""></a>


Nothing special there. When you click that link, it opens up the user’s default mail program, and will populate in the TO field.