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).

Daily Test with Code Example

HTML
CSS
JavaScript
PHP-MySQL
Which HTML5 tag is indicated to be used as container for menu with navigation links in Web site?
<section> <nav> <article>
<nav><ul>
 <li><a href="http://coursesweb.net/css/" title="CSS Course">CSS Course</a></li>
 <li><a href="http://www.marplo.net/jocuri/" title="Flash Games">Flash Games</a></li>
</ul></nav>
Which CSS property shifts an item horizontally to the left or right of where it was?
text-align clear float
.some_class {
  width: 30%;
  float: left;
}
Click on the Math object method which returns x, rounded downwards to the nearest integer.
Math.ceil(x) Math.abs(x) Math.floor(x)
var num = 12.34567;
num = Math.floor(num);
alert(num);       // 12
Indicate the PHP function which returns the number of characters in string.
mb_strlen() count() stristr()
$str = "string with utf-8 chars åèö";
$nrchr = mb_strlen($str);
echo $nrchr;        // 30
CSS Pseudo-elements

Last accessed pages

  1. PHP MySQL - using MySQLi (8250)
  2. Get Duration of Audio /Video file before Upload (5808)
  3. Insert, Select and Update NULL value in MySQL (26455)
  4. Ajax-PHP Rating Stars Script (12967)
  5. Read Excel file data in PHP - PhpExcelReader (56584)

Popular pages this month

  1. Read Excel file data in PHP - PhpExcelReader (321)
  2. PhpSpreadsheet - Read, Write Excel and LibreOffice Calc files (265)
  3. Register and show online users and visitors (253)
  4. Courses Web: PHP-MySQL JavaScript Ajax HTML CSS Flash-AS3 (244)
  5. Insert, Select and Update NULL value in MySQL (157)