Take a moment and learn about CSS pseudo elements in this short guide. The topic of pseudo classes was covered in the post CSS Pseudo Classes Explained for Beginners with options such as hover and focus on display. This time you can dive just a bit deeper to see what wonderful options you can add on to selectors to form pseudo elements to style the HTML.
If you feel you still need some pointers on the basics of HTML and CSS check out HTML for Dummies and CSS Basics for Beginners respectively for a quick and clear run through of each topic. If you are ready, then let’s jump down into building your own CSS pseudo elements.
Just What Exactly Is a CSS Pseudo Element?
An easy way to explain the notion of a pseudo element is to think of it as an advanced CSS selector. The use of pseudo elements allows you to have a sense of fine tuning to the exact portion of an element you may want to manipulate.
In the following example you can see how this is used in practice. The pseudo element selector “first-letter” allows you to edit the first letter of an element. In this case, the target element is a paragraph (p) element.
In the example shown above, the target HTML element (p) is stated. It is then followed by a single colon and the pseudo-selector of “first-letter”. Take note of that single colon use for later. Also, note that there are no spaces between these items.
Inside the curly braces, you have the CSS styling applied to the element. However, due to the use of the pseudo-selector, the styles will only be applied to the first letter found in the element. This leads to the result shown in the example with the word “check” having its first letter appear larger, bordered, and colored.
The Proper Double Colon Start
In the next example, the pseudo-selector will target no specific element, but instead an event upon an element. When a user highlights a selection of text on a page, the text itself normally takes on a different background color, (generally this is a shade of blue).
Using the pseudo-selector of “selection”, you have the option to change that effect. Take a look at the example below where this is put into action.
As you can see, the CSS styling is in effect as the highlighted text selection has a purple background with a yellow-colored font. One thing to take note of is the syntax of the pseudo-selector here.
Pseudo-elements should always start with a double colon as good practice. You might notice that in the paragraph element used above with the first-letter pseudo-selector, only one colon was used. While it is possible with certain pseudo-selectors to only use one colon, your standard syntax should be to always use two. The double-colon syntax is the standard form for distinguishing between a pseudo-element and a pseudo-class as of CSS3. A special note can be made for designers working with Internet Explorer versions that only support the single colon syntax. As with any project you work on, be sure to verify browser compatibility to ensure all users have a smooth experience.
Moving back to the selection pseudo-selector, remember that there is no direct HTML element being targeted in this instance as it is instead using an event. This allows you to apply the selection event to any applicable text on the page. In the image below, the selection event is also shown to be used on a heading element as well.
Keeping this in mind can help create flexibility in your applied styles. Although, you should also be keen to remember this in case you have undesired effects on other elements as well. You can reign in these changes of course by adding in a target HTML element for the event to focus on.
In the example code shown below, the selection pseudo-selector is prefixed by a paragraph element (p) to isolate the CSS styles to only that element.
Now, only the paragraph element uses the new selection format styling, leaving the heading element to display the normal blue background and white font coloring. Consider how this could be useful if you have a particular background image or color in use where that text appears on the page. Using the selection pseudo-selector can help the user to see the text easier if the standard blue background would otherwise cause an issue.
Popular Pseudo Use: The before and after Pseudo Elements
The last item to touch on is the use of the “before” and “after” CSS pseudo elements. These are the popular options for many designers when the idea of a pseudo element is researched. As the naming suggests, these two pseudo elements allow you to insert content before or after an element respectively.
Using each option is the same as any other pseudo element requiring a double colon after the target element. In the example shown below, the before selector is applied to paragraph elements in the HTML document.
The content applied was a URL that leads to a local file on the machine. This image file provides the image shown before all paragraph elements. This can be seen in the example provided below.
Another interesting note you may notice is that the image used comes right before the element, on the same block. By default, these items are placed with an inline display. Changing the display value to block can alter the output on the page.
Now you can see that the image content is placed on its own block level. This can be useful should you want to alter the way the end-user reads the content. Another interesting use of the before CSS pseudo element is to generate a warning or attention signs for your content.
In the next example, note that the content property for the “div::before” pseudo element is set to a text string. Additional CSS styling is also added in the mix to generate the visual warning design.
You could save this style to use in multiple areas of a page where you want the end-user to inherently pay closer attention. Sites that include instructions guides, medical information, or even cooking directions could benefit from the use of pseudo elements like this.
Taking that idea even one small step further, the inclusion of the “after” CSS pseudo element can create a warning bookend of sorts for your content. Notice in the example below that nearly the same CSS content was used for the div. The only changes are that the pseudo selector of “before” has been replaced with “after” and the margin-right was altered to margin-left. These changes provide the output on display below.
Just the Basics
These short examples are geared towards getting your feet wet with the use of CSS pseudo elements. There is still a wide berth of content to explore on pseudo classes and elements. Once you feel comfortable with the idea of what a pseudo element is, you can start to really get a handle on when you should use them. As with many of the tools in CSS, learning how to use them is only part of the work. Getting creative with your available options is where you make those tools really shine.
The concepts of a pseudo item can extend far beyond just CSS. Take a look at the world of programming to really kick the idea up a notch. Programming can jumpstart your options for new roles. Coding skills can help you make those new professional possibilities a reality. Take the first step and enroll in Udacity’s Intro to Programming Nanodegree today to start the journey.
