How to Customize Your Archive’s Titles With CSS Only, And the Use of The “Before” and “After” Selectors

Previously we worked on 5 Simple Hacks to Customize the Twenty Twenty Theme With CSS Only, and among them we saw a way to customize the Archive’s title by hiding the words “Category” and “Tag”. Now, what if you want your own label? For instance: instead of the word “Category”, display “Sections.”

What we’ll be doing here is to create a new archive’s prefix using the CSS selector :before.

Please note: this solution works for the Twenty Twenty Theme, because “Category” and “Tag” are span elements. If you’re using another theme, you may need to use the WP filter get_the_archive_title_prefix() in your functions.php file, with a child theme.

The :Before and :After Selectors

These selectors, attached to the ones you want to modify, add content before or after respectively. For instance…

.category .archive-title:before {
	content:'Sections:';
}

.tag .archive-title:before {
	content:'Topics:';
}

… will add the word “Sections (plus a colon)” to your category’s archive title, and the word “Tag (plus a colon)” to your tag’s archive title.

You can also modify the way that content looks like; for instance, its color, font-family and how it’s going to be displayed. Here’s an example that includes also what we saw previously:

/*Hide the words Category and Tag*/
.archive-title .color-accent /*updated*/{
	display:none;
}

/*Add and customize text for Category Archives*/
.category .archive-title:before {
	content:'Sections';
	color:#555;
	font-family: 'Indie Flower', cursive;
	font-weight: 400;
	display:block;
	margin-bottom:0.5em;
}

And here is the result:

There is a lot more you can do; hey, you can even add images before or after an element! The one thing you cannot add is HTML content; for instance, a link.

Related: How to download free fonts and install them in your blog

Keeping Updated

At W3Schools, where you we can lear more about these selectors, I recently found out that the code has been updated; however, the new one doesn’t work yet on IE8 and Opera 4-6.

The new way, as you’ll see at W3Schools, uses:

• two semicolons before the selectors (i.e.: ::before; ::after)
• quotations marks (instead of apostrophes) to add our text (i.e.: "My text")

Use the old way for now; I’m simply leaving this note to encourage you to take a peek, from time to time, at how the languages evolve.

And… that’s a wrap. Happy coding!