Halo teman teman dumenity, selamat datang di tutorial tutorial pemrogramman web dumet school, kali ini kita akan mengenal apa itu CSS Pseudo Element.
Pseudo Element adalah element semu yang berada pada tiap tiap tag HTML, seakan akan kita menambahkan elemen atau suatu tag baru di dalam tag yang kita beri style. semua tag HTML bisa kita beri pseudo element.
Ada 4 pseudo Element yang dikelompokkan menjadi dua bagian, yang pertama pseudo element ::before dan ::after dan kedua pseudo elemen ::first-letter dan ::first-line.
sebagai contoh kita akan membuat file index. html yang isinya seperti berikut
<!DOCTYPE html>
<html lang ="en" dir ="ltr">
<head>
<meta charset ="utf-8">
<title> CSS Pseudo Element </title>
</head>
<body>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea blanditiis velit illum architecto assumenda perferendis ipsum accusamus repellat recusandae, dolores soluta eveniet praesentium quae at nemo enim harum veniam, doloribus! </p>
</body>
</html>
lalu kita akan menambahkan pseudo elemen ::before dan ::after pada tag p yang kita buat di atas. seperti in css nya. cukup kita buat script css berikut teman teman.
p{
padding: 20px
}
p::before{
content: "Pseudo element before";
width: 100px;
height: 100px;
background: salmon;
padding: 20px;
display: block;
}
p::after{
content: "Pseudo element after";
width: 100px;
height: 100px;
background: lightblue;
padding: 20px;
display: block
}
hasilnya seperti berikut.
yups bisa kita lihat kalo dengan pseudo element ini bisa membuat element. sebelum dan sesudah element tersebut. Dan kita bisa melakukan apapun di pseudo element tersebut teman teman..
sekian tutorial CSS Pseudo Element ::before dan ::after semoga bermanfaat yah teman teman