CSS

Cara penggunaan PSEUDO ::after & ::before pada CSS

by Nofrisdan Sitopu April 07, 2021



Halo Teman-teman semuanya kembali dengan saya di blog kita bersama, hari ini kita akan membahas mengenai cara menggunakan pseudo ::after & ::before Pada css

oke sebelumnya kita akan membahas apa sih itu ::after dan ::before apa tujuannya ? dan bagaimana cara penggunaannya

Pengertian 

::after adalah sebuah pseudo elemen yang berfungsi untuk menambahkan sebuah elemen string SETELAH elemen utama

::before adalah sebuah pseudo elemen yang berfungsi untuk menambahkan sebuah elemen string SEBELUM elemen utama


Cara penulisan

::after


.elemen::after{ #content }

Keterangan : penggunaan after di awali dengan titik dua ( :: ) dan di ikuti oleh after

 ::before


.elemen::before{ #content }

Keterangan : penggunaan after di awali dengan titik dua ( :: ) dan di ikuti oleh before

 

Tujuan Menggunakan ::after & ::before

Untuk Tujuan penggunaan ::after dan ::before ialah disaat kita ingin menambahkan sebuah conten seperti string maupun elemen kosong html untuk melengkapi elemen utama yang kita inginkan, sehinggan pseudo ini sangat tepat untuk digunakan

 Cara penggunaan 

Oke untuk cara penggunaan kita akan langsung praktek saja, selanjutnya teman-teman bisa ikuti langkah-langkah berikut :

langkah 1

Buat file dengan nama after.php atau after.html dan copy kan source code dibawah ini :

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>:: after</title>
<style>
body {
text-align: center;
}

.after h1 {
font-size: 90px;
}

/* code Penggunaan AFTER */
.after:hover::after {
content: "HALLO INI AFTER MUNCUL SETELAH ELEMEN";
font-size: 50px;
color: red;
}
</style>
</head>

<body>
<!--
SESUAI DENGAN YANG DIJELASKAN DI BLOG BAHWA AFTER BEFUNGSI
UNTUK MENYISIPKAN SEBUAH ELEMEN SETELAH ELEMEN UTAMA PERHATIKAN
DI STYLE DIATAS
-->
<div class="after">
<h1>HALLO</h1>
</div>

<a href="../index.php">Kembali</a>
</body>

</html>

selanjutnya jalankan file tersebut di server local anda / localhost. sesuaikan dengan penamaan folder / file anda 

setelah anda menjalankan nya, ketika anda arahkan kursor ke HALLO maka akan muncul seperti gambar dibawah :


Langkah 2 

selanjutnya untuk mencoba before buatkan file dengan nama before.php dan copy source code dibawah ini :

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>:: before</title>
<style>
body {
text-align: center;
}

.after h1 {
font-size: 90px;
}

/* code Penggunaan AFTER */
.before:hover::before {
content: "HALO INI HASIL BEFORE MUNCUL SEBELUM ELEMEN ";
font-size: 50px;
color: red;
}
</style>
</head>

<body>
<!--
SESUAI DENGAN YANG DIJELASKAN DI BLOG BAHWA AFTER BEFUNGSI
UNTUK MENYISIPKAN SEBUAH ELEMEN SEBELUM ELEMEN UTAMA PERHATIKAN
DI STYLE DIATAS
-->
<div class="before">
<h1>HALLO</h1>
</div>

<a href="../index.php">Kembali</a>
</body>

</html>

Maka hasilnya akan seperti gambar dibawah ini :

Jika kita perhatikan perbandingan dari gambar langkah 1 ( menggunakan ::after ) dan langkah 2 ( menggunakan ::before ) maka dapat kita lihat bahwa pada gambar after akan muncul setelah elemen utama sedangkan gambar before akan muncul sebelum elemen utama


JIka anda mengalami error silahkan dwonload source code nya DISINI

 

Nahh mudah bukan cara menggunakan pseudo ::after dan ::before, jika teman-teman masih ada yang kurang silahkan tinggalkan pesan di kolom komentar


sekian dan terimakasih .......


Tags:
Nofrisdan Sitopu

Diposting oleh Nofrisdan Sitopu

Hallo saya Nofrisdan Sitopu, saya seorang Fullstack Developper, senang berkenalan dengan anda

0 Komentar