Pseudo CSS Before After

Pseudo CSS before after biasanya digunakan pada awal dan sesudah sebuah elemen. “Pseudo” memiliki arti semu, karena elemen ini jika kita lihat didalam penulisan sebuah kode HTML, elemen tersebut tidak benar-benar berada disana, melainkan kita akan menggunakan elemen tersebut di CSS.

Contoh sederhananya sebagai berikut:

Selector Before CSS

::before {
    css declarations;
}

Selector After CSS

::after {
    css declarations;
}

Contoh penggunaan Before

<!DOCTYPE html>
<html>
<head>
<style>
p::before { 
    content: "Read this -";
    background-color: yellow;
    color: red;
    font-weight: bold;
}
</style>
</head>
<body>

<p>My name is Donald</p>
<p>I live in Ducksburg</p>

<p><b>Note:</b> For this selector to work in IE8, a DOCTYPE must be declared, and you must use the old, single-colon CSS2 syntax (:before instead of ::before).</p>

</body>
</html>

Contoh penggunaan after

<!DOCTYPE html>
<html>
<head>
<style>
p::after { 
    content: " - Remember this";
    background-color: yellow;
    color: red;
    font-weight: bold;
}
</style>
</head>
<body>

<p>My name is Donald</p>
<p>I live in Ducksburg</p>

<p><b>Note:</b> For this selector to work in IE8, a DOCTYPE must be declared, and you must use the old, single-colon CSS2 syntax (:after instead of ::after).</p>

</body>
</html>

Jika kita perhatikan pada CSS Selector Before, maka disana akan terlihat sebuah elemen baru terbentuk, tepat berada diposisi paling depan sebuah elemen/ tag, namun jika kita perhatikan pada struktur kode HTML, elemen tersebut tidak berada disana. Sebaliknya pada selector After, elemen baru akan ditambahkan pada bagian akhir atau belakang elemen/tag HTML.

Awalnya cukup sedikit membingungkan, kalian sebaiknya mencoba potongan kode diatas yang diambil dari w3schools

Teman-teman juga dapat mengembangkan efek yang menarik dengan menggunakan Pseudo CSS before after, seperti berikut: