A :before álelem kijelölő segítségével a kijelölt HTML elem elé és az :after álelem kijelölő segítségével pedig mögé szúrhatunk be a HTML kódban nem szereplő tartalmakat.
A beszúrt a content tulajdonságban adható meg. A tartalom lehet szöveg, külső objektum, idézőjel, egy számláló értéke vagy egy css tulajdonság értéke
:before álelem
Hatás: A content tulajdonságban megadott tartalmat beszúrja a HTML elem elé.
:before
{
content:
:
beszúrt tartalom;
}
:after álelem
Hatás: A content tulajdonságban megadott tartalmat beszúrja a HTML elem mögé.
:after
{
content:
:
beszúrt tartalom;
}
Példa:
Forráskód
<style>
p:before {content:"Bekezdés:"; background-color:yellow;}
h2:before {content:url("Z_labda_17.png") " ";}
a:after { content: " (" attr(href) ") "; }
q:before { content: open-quote; }
</style>
….
<body>
<h2>Ez egy címsor </h2>
<p>Ez egy bekezdés</p>
<a href="https://informatika.gtportal.eu/">
Informatika tananyag</a>
<br> <br>
<q>Ez egy idézet</q>
</body>
Eredmény*
* Az eredmény megjelenítése az Ön által használt böngészőtől függ.
A példakód külön ablakban is megtekinthető: css_beszurt_tartalom_01.html