Nothing is for sale here. Freewill tips keep the site running. Want to help? → Tip via Paypal

CSS Pseudo-elements: Unlock the Power!

As the name implies, a pseudo-element is not a real element, but a mechanism that provides a way to stylize certain parts of an element that cannot be targeted automatically using traditional CSS methods. For example, using a pseudo-element you can:

Make the first letter of a paragraph a larger font size and different color.
Automatically insert a text phrase, symbol, or image before or after an element.
Make the first sentence of a paragraph indented, and more.

Pseudo-elements are denoted by a double colon (::) notation in CSS. In older versions of CSS, a single colon notation was used, but the double colon notation was introduced in CSS3 to distinguish pseudo-elements from pseudo-classes.

What is delayed content? It's content that appears on a web page only after a specified amount of time has elapsed. What can it be used for?

Selector	Example	Description
::after	div::after	Insert content after each division element.
::before	h1::before	Insert content before each h1 heading.
::first-letter	p::first-letter	Affects the first letter in each paragraph element.
::first-line	div::first-line	Affects the first line in each division element.
::selection	p::selection	Affects the portion of a paragraph selected by the user.
::placeholder \| see demo below

Remember what I wrote at the beginning, that pseudo-element is not a real elements, so they cannot be styled inline, only via embedded or external styles. Having said that, we'll demonstrate an example of each of those pseudo-elements in use. At the end of all the demonstrations I'll post the code for them all in one code box you can copy.

Demo: after pseudo-element

I've code this example so that "OH MY!!" will be inserted after the close of the <span> element. The next sentence is enclosed in a span element. The moon is purple and made of eggplant.

Demo: before pseudo-element

I've coded this example so an image is inserted before an H4 heading.

Imagine That!

Demo: first-letter pseudo-element

I've coded the H4 heading below so the first letter is green and the font size increased.

Whatever Dude

Demo: first-line pseudo-element

I've coded this paragraph so the first line has an increased font size and a color change. After the first line it should return to normal.

Demo: selection pseudo-element

The selection pseudo-element changes the color of the text and/or the background when it's selected. Drag your cursor across text in this paragraph it will be highlighted in yellow with a dark red background. The rest of the page highlights in white text and a black background.

Demo: placeholder pseudo-element

The placeholder pseudo-element allows you to style placeholder text in text input fields. Start typing in the text input field below and you'll see the placeholder text disappear.

Important Notes

You can copy all the CSS codes with the copy button below, but there are a few important notes to finish this up.

Even though you can't code pseudo-classes inline, you can code them up in your style sheets as generic classes, assigned classes, or named classes. With no class attached:

::first-line {color: red}

With that in your style sheet the first line of every text container (paragraph, division, etc.) would be red in color. No extra code would be required in your web page to make it happen.

p::first-line {color: green}

Assigning the pseudo-element to a paragraph as shown above, the first line of every paragraph container would be green in color. No extra code would be required in your web page to make it happen. Notice the "p" before the pseudo-class. That's why it applies only to paragraphs.

p.blue::first-line {color: blue}

With that named class in your style sheet, the first line of every paragraph container coded with the class name of blue would be blue in color. You need to add that class to a paragraph to make it happen. Here's how:

<p class="blue"> content </p>

And that, my friend, is that. Here are the codes I used. Copy button below that.

/* Don't explode your code! This is how to make a comment in CSS style sheets */
/* after pseudo-element */
span.demo::after {
  content: " OH MY!!";
}

/* before pseudo-element */
h4.demo::before {
  content: url(../images/wow.jpg);
}

/* first-letter pseudo-element */
h4.demo2::first-letter {
  color: darkgreen;
  font-size: 200%;
}

/* ::first-line pseudo-element */
p.demo::first-line {
  color: #245126;
  font-size: 120%;
}

/* ::selection pseudo-element */
p.demo::selection {
  color: yellow;
  background: darkred;}

/* ::placeholder pseudo-element */ 
/* Edge */
::-webkit-input-placeholder { 
  color: green; font-style: italic; 
}

 /* Internet Explorer */
:-ms-input-placeholder { 
  color: green; font-style: italic;
}

::placeholder {
  color: green; font-style: italic;
}

/* BoogieJack.com */

CSS Pseudo-elements: Unlock the Power!

Imagine That!

Whatever Dude

Important Notes

Essentials

Drawing Board

Notices

Sample Graphics