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

What attribute makes a radio button or checkbox input selected?

checked="checked" selected="selected" disabled="disabled"

<input type="checkbox" name="a_name" value="value" checked="checked" />

What CSS value scales the background image to the largest size contained within the element?

repeat-x contain linear-gradient

#id {
  background:url("path_to_image.png");
  background-size:contain;
  background-repeat:no-repeat;
}

What operator is used to determine the rest of the division of two numbers?

% * /

var rest8_7 = 8 % 7;
alert(rest8_7);

Indicate the PHP function that rounds a number up to the next highest integer.

floor() ceil() abs()

$nr = ceil(3.5);
echo $nr;        // 4