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

Put your own labels to your archive’s titles and customize them with nothing but CSS.

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.”

Usually we would this by modifying the respective php file of our child theme, but if we haven’t created one yet we can still achieve it with CSS.

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 another tweak.

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.

Note: please bear in mind that in the previous post we’ve hidden the span element that holds the words “Category” and “Tag”

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 header span {
	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 😉

Processing…
Success! You're on the list.

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

Any thoughts?