Css Course


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
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
CSS Pseudo-elements

Last accessed pages

  1. A simple script ActionScript 3 (4416)
  2. Check the file type before Upload (9307)
  3. SHA1 Encrypt data in JavaScript (35501)
  4. Ajax-PHP File Manager (10274)
  5. Contact page - CoursesWeb (48922)

Popular pages this month

  1. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (70)
  2. Read Excel file data in PHP - PhpExcelReader (11)
  3. ActionScript 3 Lessons (7)
  4. The Mastery of Love (7)
  5. PHP-MySQL free course, online tutorials PHP MySQL code (6)