Приглашаем посетить

Pseudo-elements

Pseudo-elements provide the effect of extra markup elements magically appearing in your document, although you don't actually add any extra markup. Here are some examples.

This pseudo-class

x:first-letter        <-- a
p:firstletter {font-size:300%; float:left;}

(a)Where x is a tag name

enables you, for example, to create a large drop-cap effect at the start of a paragraph.

This pseudo-class

x:first-line        <-- a

(a)Where x is a tag name

enables you to style the first line of (usually) a paragraph of text. For example,

p:first-line{font-varient:small-caps;}

results in the first line, not surprisingly, being in small capital letters. If you have a liquid layout where the line length changes as the browser window is sized, words automatically change format as required so that only the first line is styled in this way.

There are four other pseudo-classes. The first is :lang, which is applied to elements with a specific language code, and the other three are :left, :right and :first, which apply to paged media (print) rather than content displayed in browsers. They are little used and unevenly or not at all supported by browsers, so I am not covering them here.

These two pseudo-classes

x:before and x:after

cause specified text to be added in before and after an element, so this markup

<h1 class="age">25</h1>

and these styles

h1.age:before {content:"Age: "}
h1.age:after {content:" years old."}

Because search engines can't pick up pseudo-element content (they don't appear in the markup), don't use these elements to add important content that you want a search engine to index.

result in text that reads "Age: 25 years old." Note that the spaces added inside the quoted content strings ensure proper spacing in the resultant output. These two selectors are especially useful when the tag's content is being generated as a result of a database query; if all the result contains is the number, then these selectors allow you to provide that data point with some meaningful context when you display it for the user.

Table of Contents