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:

selector:pseudo-element { property: value; }

Or, used with class:

selector.class:pseudo-element { property: value; }

List with pseudo-elements

:after - Adds content after an HTML element (not suported by IE 7 or lower)
:before - Adds content before an HTML element (not suported by IE 7 or lower)
:first-letter - Adds a style to the first character of a text
:first-line - Adds a style to the first line of a text

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

<<-Pseudo-classes added in CSS3 -- Define Custom List-item Markers, ..->>

Daily Test with Code Example

HTML

CSS

JavaScript

PHP-MySQL

Which tag create a highlighted bolded text?

<p>Address: <strong>http://CoursesWeb.net/</strong> - Tutorials.</p>

Which of these CSS codes displays the text bolded?

text-size: 18px; font-style: italic; font-weight: 800;

#id {
  font-weight: 800;
}

What JavaScript function can be used to call another function multiple times, to a specified time interval?

setInterval() setTimeout() push()

function someFunction() { alert("CoursesWeb.net"); }
setInterval("someFunction()", 2000);

Click on the correctly defined variable in PHP.

var vname = 8; $vname = 8; $vname == 8;

$vname = 8;
echo $vname;