CSS Pseudo-elements

The CSS pseudo-elements are used to style certain aspects or parts of an element without introducing new markup or tags in the HTML document.
For example, when you define a CSS style for an HTML tag or a particular class, the content of all those tags or class will have the same style. If you want to add a different CSS style to the first letter or to the first line of a paragraph (or other block-item), you can use pseudo-elements.


  - Syntax: Or, used with class:   - Values:

after

The "after" pseudo-element can be used to insert some content after the content of an element.

To add a specific content (text, image, .wav sound) with CSS, it is used the content property and a value that represent the content; text content is added between quotes; images or .wav sound are added using url(url_file) value.


- The following example inserts a Text (CoursesWeb) after each <h4> tag:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>after</title>
<style type="text/css"><!--
h4:after {
 content: "CoursesWeb";
 color: blue;
}
--></style>
</head>
<body>
<h4>Content of the first H4 tag ... </h4>
<h4>Text within anothet H4 element</h4>
</body>
</html>
Notice how it's displayed the word "CoursesWeb" immediately after the last character of each <h4> element, as if part of the original text, but can have its own style.
  - Result:

Content of the first H4 tag ... CoursesWeb

Text within anothet H4 elementCoursesWeb

before

Before it is similar to "after", the content is inserted in the same way, but at the beginning of the element.
- You can combine pseudo-classes with pseudo-elements using the syntax:
To see the effect, here's an example with "before" and ":first-child" pseudo-class applied to the same H4 tags in the previous example.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>before</title>
<style type="text/css"><!--
h4:first-child:before {
 content: "CoursesWeb-";
 color: blue;
}
--></style>
</head>
<body>
<h4>Content of the first H4 tag ... </h4>
<h4>Text within anothet H4 element</h4>
</body>
</html>
This time the word "CoursesWeb-" is added only immediately before the first <h4> tag (indicated by 'first-child')
  - Result:

CoursesWeb-Content of the first H4 tag ...

Text within anothet H4 element

first-letter

The first-letter adds a special style to the first letter of a text.

The "first-letter" pseudo-element can only be used with block elements.


The following example applies a CSS style to the first character of the text content of each HTML element defined by a class (test).
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>first-letter</title>
<style type="text/css"><!--
.test:first-letter {
  font-size: 25px;
  color: red;
}
--></style>
</head>
<body>
<p class="test">Text within a paragraph with class="test" ...</p>
<div class="test">Another text content, in a DIV, but with the same class attribute.</div>
</body>
</html>
As you can see below, the first letter of the text of each HTML tag with class="test" has red color and size of 25px.
  - Result:

Text within a paragraph with class="test" ...

Another text content, in a DIV, but with the same class attribute.

first-line

The first-line adds a special style to the first line of a text.

The "first-line" pseudo-element can only be used with block elements.


The following example defines a CSS style that makes the first line of each HTML element with class="test" to have bold-blue text.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>first-line</title>
<style type="text/css"><!--
.test:first-line {
  font-weight: bold;
  color: blue;
}
--></style>
</head>
<body>
<p class="test">Paragraph with multiple lines<br />
  The second line ...<br />
  Another line in the same paragraph.</p>
<div class="test">Text content with two lines in a DIV element<br />
  The second line inside this DIV.</div>
</body>
</html>
  - Result:

Paragraph with multiple lines
The second line ...
Another line in the same paragraph.

Text content with two lines in a DIV element
The second line inside this DIV.

CSS2 defined the first-letter, first-line, before, and after pseudo-elements with a single colon (:). To better distinguish pseudo-elements from pseudo-classes, the CSS3 has changed this to two colons (::), (selector::pseudo-element).