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:
selector:pseudo-element { property: value; }
Or, used with class:
selector.class:pseudo-element { property: value; }

List with pseudo-elements


CSS 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

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.

<style>
h4:after {
 content: 'CoursesWeb';
 color: blue;
}
</style>

<h3>Example CSS after</h3>

<h4>Content of the first H4 tag ... </h4>
<h4>Text within anothet H4 element</h4>

CSS before

CSS 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:
selector:pseudo-class:pseudo-element { property: value; }

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.
<style>
h4:first-child:before {
 content: 'CoursesWeb-';
 color: blue;
}
</style>

<h3>Example CSS before</h3>

<div>
<h4>Content of the first H4 tag ... </h4>
<h4>Text within anothet H4 element</h4>
</div>

CSS 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).
<style>
.test:first-letter {
 font-size: 25px;
 color: red;
}
</style>

<h4>Example CSS first-letter</h4>

<p class='test'>Text within a paragraph with class='test' ...</p>
<div class='test'>Another text content, in a DIV, with the same class attribute.</div>

CSS 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.
<style>
.test:first-line {
 font-weight: bold;
 color: blue;
}
</style>

<h4>Example CSS first-line</h4>

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

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 defines marked text? (can be used to highlight parts of text)
<mark> <embed> <span>
<p>Free corses: <mark>coursesweb.net</mark> for Web Development.</p>
Which CSS pseudo-class adds a style to an element when the mouse is over it?
:focus :hover :active
a:hover {
  font-weight: bold;
  color: #00da01;
}
Click on the function which returns a string value that represents the number rounded to the x digits after the decimal point.
toPrecision(x) toFixed(x) floor(x)
var num = 12.34567;
num = num.toFixed(2);
alert(num);       // 12.35
Indicate the PHP function which reads an entire file into an array.
[) file() readfile()
$arr = file("a_file.txt", FILE_IGNORE_NEW_LINES | FILE_SKIP_EMPTY_LINES);
var_export($arr);
CSS Pseudo-elements

Last accessed pages

  1. PhpSpreadsheet - Read, Write Excel and LibreOffice Calc files (17703)
  2. JavaScript code and PHP (25341)
  3. Contact page - CoursesWeb (21727)
  4. Tabs effect with CSS (22434)
  5. Making DIV Contents Scroll Horizontally, with multiple Div`s inside (28752)

Popular pages this month

  1. Making DIV Contents Scroll Horizontally, with multiple Div`s inside (1272)
  2. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (1241)
  3. Tabs effect with CSS (1229)
  4. Contact page - CoursesWeb (1227)
  5. Insert, Select and Update NULL value in MySQL (729)