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. PHP Method Chaining (2388)
  2. Animation of HTML elements with CSS (200)
  3. Convert XML to JSON in PHP (9772)
  4. Date and Time in ActionScript 3 (8568)
  5. TV-Screen shape with CSS (2550)

Popular pages this month

  1. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (62)
  2. JavaScript Course - Free lessons (43)
  3. Read Excel file data in PHP - PhpExcelReader (43)
  4. PHP-MySQL free course, online tutorials PHP MySQL code (38)
  5. HTML Course - Free Lessons (37)