CSS Pseudo Element ::before dan ::after
Halo teman teman dumenity, selamat datang di panduan panduan pemrogramman web Source Code Aplikasi, kali ini kita akan mengenal apa itu CSS Pseudo Element.
Pseudo Element yakni element semu yang berada di tiap tiap tag HTML, seakan akan kita menambahkan unsur atau suatu tag baru di pada tag yang kita beri style. segala tag HTML dapat kita beri pseudo element.
Ada 4 pseudo Element yang dikelompokkan menjadi dua bagian, yang pertama-tama pseudo element ::before dan ::after dan kedua pseudo unsur ::first-letter dan ::first-line.
selaku contoh kita akan merancang 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 unsur ::before dan ::after di tag p yang kita bikin di atas. seperti in css nya. lumayan kita bikin 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 dapat kita lihat kalo dengan pseudo element ini dapat merancang element. sebelum dan setelah element tersebut. Dan kita dapat menjalankan apapun di pseudo element tersebut teman teman..
demikianlah panduan CSS Pseudo Element ::before dan ::after semoga bermanfaat yah teman teman
Sumber https://kursuswebsite.org
