5.4. Adding With CSS: Pseudo Selectors

With CSS, we can also add something, text or images, using the pseudo selector :before.

We’re going to play with the archives’ titles; since we’ve hidden “Category” and “Tag”, we’ll see how we can add another word; and, we’ll also customize the search results page for when there’s no result.

Example 1: Category and Tags Prefix

For the categories’ archive, we need to use .archive.category (without any space) before our own selector:

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

And for the tags’ archive, we need to use .archive.tag instead:

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

You can style them as you wish, adding color, decorations, etc.

Example 2: The Search Results

Before and After:

The Code

.search-no-results .archive-title span.color-accent {
	display:none;
}

.search-no-results .archive-title:before {
	content:'Oops! Your Search for';
}

.search-no-results .archive-title:after {
	content:'...';
}

.search-no-results .archive-subtitle p {
	display:none;
}

.search-no-results .archive-subtitle:before {
	content:'... did not return any results. Please try again! There must be something in here...'
}

Resources

Laly York. Neurodivergent Gen-X writer / B.Ed. / Lawyer. Writing, coding and taking pics. From Jupiter, living in a soap opera; flying on the web with three blogs.

JOIN COMMENTS

Any thoughts?