CSS īpašībasPseidoelements <:after>
Pseidoelements :after
 Internet Explorer |
 Chrome |
 Opera |
 Safari |
 Firefox |
||||||||||||||
| 6.0 | 7.0 | 8.0 | 9.0 | 2.0 | 3.0 | 4.0 | 5.0 | 9.2 | 9.6 | 10 | 2.0 | 3.1 | 4.0 | 5.0 | 2.0 | 3.0 | 3.6 | 4.0 |
Panatinformācija
| Izmantošana | Visiem elementiem |
|---|---|
| Specifikācija | http://www.w3.org/TR/CSS21/selector.html#before-and-after |
CSS versijas
| CSS 1 | CSS 2 | CSS 2.1 | CSS 3 |
|---|---|---|---|
 |
 |
|
|
Apraksts
Pseidoelements, kurš tiek izmantots vēlamā satura attēlošanai pēc tā elementa, kuram tas ir uzstādīts. Pseidoelements :after darbojas kopā ar īpašību content.
Pseidoelementam :after raksturīgas šādas īpatnības.
- Pievienojot :after blokveida elementam, īpašības display vērtība var būt tikai viena no : block, inline, none, marker. Visas pārējās vērtības tiks traktētas kā block.
- Pievienojot :after iebūvētam elementam, display drīkst pieņemt vērtības inline vai none. Visas pārējās vērtības tiks traktētas kā inline.
Sintakse
elements:after { content: "teksts" }Vērtības
Nav.
Piemērs
XHTML 1.0CSS 2.1CSS 3IE 6IE 7IE 8Cr 5Op 10Sa 5Fx 3.6
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>after</title>
<style type="text/css">
p.new:after {
content: "Viss kārtībā!"; /* Pievienojamais teksts */
color: #333; /* Teksta krāsa */
background-color: #fc0; /* Fona krāsa */
font-size: 90%; /* Šrifta izmērs */
padding: 2px; /* Atkāpes ap tekstu */
}
</style>
</head>
<body>
<h2>Истории</h2>
<p class="new">История о том, как необходимо было сделать могилу,
ее начали копать, а потом закапывать, и что из этого получилось.</p>
<p>История о том, как возле столовой появились загадочные розовые
следы с шестью пальцами, и почему это случилось.</p>
</body>
</html>Šajā piemērā teksta paragrāfa beigās, kuram piešķirta klase new, tiek attēlots noteikts teksts uzmanības pievēršanai. Rezultāts redzams attēlā.
Pārlūki
Opera 9.2 ņem vērā visas atstarpes, itkā tās atrastos tegā <pre>.
Pārlūks Firefox līdz versijai 2.0 ieskaitot, nestabili strādā ar pozicionētajiem elementiem, kā arī nepielieto :after tegam <fieldset>.
