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: Or, used with class:   - Values:

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:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>after</title>
<style type="text/css"><!--
h4:after {
 content: "CoursesWeb";
 color: blue;
}
--></style>
</head>
<body>
<h4>Content of the first H4 tag ... </h4>
<h4>Text within anothet H4 element</h4>
</body>
</html>
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.
  - Result:

Content of the first H4 tag ... CoursesWeb

Text within anothet H4 elementCoursesWeb

before

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:
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.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>before</title>
<style type="text/css"><!--
h4:first-child:before {
 content: "CoursesWeb-";
 color: blue;
}
--></style>
</head>
<body>
<h4>Content of the first H4 tag ... </h4>
<h4>Text within anothet H4 element</h4>
</body>
</html>
This time the word "CoursesWeb-" is added only immediately before the first <h4> tag (indicated by 'first-child')
  - Result:

CoursesWeb-Content of the first H4 tag ...

Text within anothet H4 element

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).
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>first-letter</title>
<style type="text/css"><!--
.test:first-letter {
  font-size: 25px;
  color: red;
}
--></style>
</head>
<body>
<p class="test">Text within a paragraph with class="test" ...</p>
<div class="test">Another text content, in a DIV, but with the same class attribute.</div>
</body>
</html>
As you can see below, the first letter of the text of each HTML tag with class="test" has red color and size of 25px.
  - Result:

Text within a paragraph with class="test" ...

Another text content, in a DIV, but with the same class attribute.

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.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>first-line</title>
<style type="text/css"><!--
.test:first-line {
  font-weight: bold;
  color: blue;
}
--></style>
</head>
<body>
<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>
</body>
</html>
  - Result:

Paragraph with multiple lines
The second line ...
Another line in the same paragraph.

Text content with two lines in a DIV element
The second line inside this 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 tag defines the clickable areas inside the image map?
<map> <img> <area>
<img src="image.jpg" usemap="#map1">
<map name="map1">
  <area shape="rect" coords="9, 120, 56, 149" href="#">
  <area shape="rect" coords="100, 200, 156, 249" href="#">
</map>
Which CSS property defines what is done if the content in a box is too big for its defined space?
display overflow position
#id {
  overflow: auto;
}
Click on the event which is triggered when the mouse is positioned over an object.
onclick onmouseover onmouseout
document.getElementById("id").onmouseover = function(){
  document.write("Have Good Life");
}
Indicate the PHP variable that contains data added in URL address after the "?" character.
$_SESSION $_GET $_POST
if(isset($_GET["id"])) {
  echo $_GET["id"];
}
CSS Pseudo-elements

Last accessed pages

  1. Drag Racer V3 (14589)
  2. Naruto Friends Dressup (236)
  3. Naruto Dating Sim (1603)
  4. PHP Switch Case (1825)
  5. Get the Height and Width of web Page and browser Window (1416)

Popular pages this month

  1. Qwop (6862)
  2. Drag Racer V3 (4694)
  3. Bubbles3 (1916)
  4. List with All the Games (1605)
  5. Butterfly Kyodai (1507)