Understanding Pseudo Elements CSS in WordPress themes

Pseudo-elements enable us to style certain parts of text, such as the first letter in a paragraph, or the first line in a paragraph.  There’s a bit of a trick to borrowing code to achieve these effects within a WordPress theme; disappointingly, adding the drop-cap seems to pretty much require a plug-in solution. Disappointed sigh. Plug-ins are all fine and good for Business Plans on WordPress, or self-hosted blogs. There SHOULD be a way to achieve them without the overhead of a plug-in! In this post, we’ll look at some of the pseudo-elements that can be used to create interesting stylings of first letters but not full-on drop-caps. (I will continue to search for a work-around!) Here, we’ll explain the basics of using the pseudo-elements “first-letter” and “first-line.”

What is a Pseudo Element?

Pseudo elements are keywords added to a selector (like H1, or p or blockquote) that allow us to create typographic styles for just parts of them of the selector. Sometimes, this is easy in WordPress. Sometimes, it’s really hard.

Here’s an example. Suppose I wanted to turn all of the first letters of the H2 elements to the color blue.

The syntax for pseudo elements uses two colons, like this:

Screen Shot 2018-04-01 at 7.24.41 PM.png

The result, the first letter of the H2 header is now blue:

Screen Shot 2018-04-01 at 7.24.47 PM
This is an example of what the H2 tag would generate with this CSS code.

It’s easier to style things our WordPress theme has NOT already specifically styled FOR us–and when the parent style sheet hasn’t combined that styling with other elements. The H2 tags are fairly easy to style in terms of color, size and style, other header tags can be quite a bit more difficult to style using the pseudo elements. It’s been a real headache trying to figure out how to make drop-caps! The problem of styling drop-caps has led developers to just turn a bug into a feature — and provide plug-ins. Here’s a list of some of the plug-ins available for drop-caps. While these can work for Business Plan folks, it leaves Premium users out in the cold–which I find unacceptable.

I’ll be exploring more tricks and headaches with pseudo-elements and the search for work-arounds for Premium users in future posts. I may even break down and do a round-up of research on drop-cap plug-ins for the Business Plan folks–sooner if folks ask for it.

Why Do I hate plug-ins?

From my sojourn as a self-hosted blog creator, I found that plug-ins break. Plug-ins require maintenance. Plug-ins are not always well-supported (Yoast SEO still gives me a pain when I think about it). And plug-ins are not available to Premium users, which kind of sucks. I would like WordPress.com to provide more support and help for people to learn more advanced CSS and have fun with their blog designs — so that when they step up to the Business Plan (if ever), they are confident and knowledgable. Investigating how themes are put together seems to be the key — and I’m on it. That’s my rant-of-the day.

More soon. ~Lola

Postscript:The W3 school has a great page on pseudo-elements that is the basis of this walk-through. Check it out and have fun!

Author: Lola

Recovering academic, real-life, honest to cornflakes anthropologist (Ph.D. and fieldwork and everything), tech-head and social media researcher.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.