Pseudo-elements

Pseudo-elements allow setting the logical elements, which are not defined in the tree elements of the documents and also generating the content, which are not located in the source code of the text. For example, the object model of the document doesn’t offer the convenient mechanism for the access to the first symbol of the text, that is why pseudo-elements allow to change the style of the inaccessible element.

The syntax of the use of the pseudo-elements is the following:

Selector:Pseudo-element { The description of the style rules }

In the beginning the name of the selector comes, then the colon is written, after which comes the name of the pseudo-element. Every pseudo-element can be applied only to one selector, if it is needed to set several pseudo-elements at the same time for one selector, the style rules should be added to them independently, as it is shown below.

.foo:first-letter { color: red }
.foo:first-line {font-style: italic}

Note

Pseudo-elements can’t be applied to the inner styles, only to the table of the connected or global styles.

All the pseudo-elements with their description and values are listed below.

after

Are applied for the insert of the fixed content after the element. This pseudo-element works together with the style characteristic CONTENT, which defines the content for the insert. In the example 17.1 it is shown the use of the pseudo-class AFTER for the text adding into the end of the passage.

Example 17.1. The appliance of the pseudo-element AFTER

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
  <title>Pseudo-elements</title>
  <style type="text/css">
   P.new:after {
    content: " - Новьё!"; /* Added after the text of the paragraph */
   }
  </style>
 </head>
 <body>
  <p class="new">The lion-hunting in the desert with the help of the method of the gold section. </p>
  <p>Method of the lion hunting with the help of the simple search.</p>
 </body>

The result of the example is shown in the figure 17.1.


Fig.17.1. The adding of the text to the paragraph with the help of AFTER

In this example the additional word is added to the passage content with the class NEW, which comes out as the value of the parameter CONTENT.

Note
Pseudo-elements AFTER and BEFORE and also the style quality CONTENT are not supported by the browser Internet Explorer in any of its versions.

Before

By its action BEFORE is similar to pseudo-element AFTER, but pastes the content up to the element. In the example 17.2 it is shown the adding of the markers of their type to the elements of the list with the help of hiding the standard markers and the appliance of the pseudo-class BEFORE.

Example 17.2. The use of the pseudo-element BEFORE

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
  <title>Pseudo-elements</title>
  <style type="text/css">
   UL {
    padding-left: 0; /* Remove the indent from the left */
    list-style-type: none; /* Hide the markers from the list */
   }
   LI:before {
    content: "\20aa "; /* Add the symbol before the element from the list symbol to the unicode */
   }
  </style>
 </head>
 <body>
  <ul>
   <li>Cheburashka</li>
   <li>Gena crocodyle</li>
   <li>Opers hat</li>
   <li>Rat Larisa</li>
  </ul>
 </body>
</html>

The result of this example is shown below (fig.17.2).



Fig.17.2. The change of the marker’s view with the help of BEFORE

In the given example the pseudo-class is set for the selector LI, which defines the elements of the list. Adding of the desiring symbols happens with the help of setting the value of the characteristic CONTENT. Pay attention, that the text is not always comes as the argument, the symbols of the unicode may also be changed.

First-letter
Defines the style of the first symbol in the text of the element it is added to. This allows creating drop cap in the text and the prominent initial.

Note
The drop cap corresponds the accelerated first letter, the basic line of which is lower on the one or several lines than the basic line of the main text. The prominent initial – is the accelerated uppercase letter, the basic line of which coincides with the basic line of the main text.

Let’s examine the example of the creation the prominent initial. For doing it, it is necessary to add to the selector P the pseudo-element FIRST-LETTER and install the desirable style of the initial. Particularly, to enlarge the text size and to change the text color (example 17.3).

Example 17.3. The use of the pseudo-element FIRST-LETTER

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
  <title>Pseudo-elements</title>
  <style type="text/css">
   P {
    font-family: Arial, Helvetica, sans-serif; /* Гарнитура шрифта основного текста */
    font-size: 90%; /* script size */
    color: black; /* Black color of the text */
   }
   P:first-letter {
    font-family: 'Times New Roman', Times, serif; /* The typeface of the first letter script */
    font-size: 200%; /* the size of the script of the first symbol */
    color: red; /* red color of the text */
   }
  </style>
 </head>
 <body>
    <p>The ray of the flash enlighted the old squeaking stairs, using which Pasha ascended five minutes ago. Olya carefully opened the door and lightened inside of the house. The ray of the light was making its way through the tight veil of darkness and dust. </p>
    <p> Olya’s look fallen to the floor and she screamed. There was nobody in the empty room, and there was a broken Pasha’s shoe.</p>
 </body>
</html>

The result of this example is shown below (fig.17.3).



Fig.17.3. the creation of the prominent initial

In this example the script, the size and the color of the first letter of the every passage of the text is changed.

first-line
Defines the style of the first line of the sectional text. The length of this line depends on the many factors, such as the script used, the size of the browser’s window, the width of the block, language etc.

Note
Not all the style qualities can be applied to the pseudo-element FIRST-LINE. It is supposed to use the parameters, referred to the script, to the change of the text color and background and also: clear, line-height, letter-spacing, text-decoration, text-transform, vertical-align and word-spacing.

In the example 17.4 it is shown how the pseudo-element FIRST-LINE is used concerning the text passage.

Example 17.4. The highlighting of the first text line

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
  <title>Pseudo-elements</title>
  <style type="text/css">
   P:first-line {
    color: red; /* the red color of the text */
    font-style: italic; /* Italic type face */
   }
  </style>
 </head>
 <body>
  <p> Interesting, is there any method for the practical use of the quality first-line? No, there is no such a method to show that it is possible and that could truly take the breath away from the beauty of decision, the eyes could sparkle from the hidden perspectives, after that it remains to say that it is impossible to do the same in a different manner, so gracefully and effectively.</p>
 </body>
</html>

The result of the example is shown in the fig.17.4.


Fig.17.4. The result of the use of pseudo-element FIRST-LINE

In the given example the first line is highlighted in red color and in italic type face. Pay attention, that while changing the width of the browser’s window, the style of the first line remains constant, independently on the words it contains.