Belajar CSS Part 24 - Pseudo Element

CSS Pseudo-element

Apa itu pseudo-element?
pseudo-element digunakan untuk menata bagian-bagian tertentu dari suatu elemen.

Sebagai contoh, pseudo-element dapat digunakan untuk:

Menerapkan style untuk huruf pertama, atau garis, dari suatu elemen
Memasukkan konten sebelum atau sesudah konten dari suatu elemen

Sintaks

Sintaks dari pseudo-element:

selector::pseudo-element {
    property:value;
}

Pseudo-element ::first-line

Pseudo-element ::first-line digunakan untuk menambah efek khusus pada baris pertama dari sebuah teks.

Contoh berikut penggunaan pseudo-element ::first-line pada baris pertama dari teks disemua elemen <p>.

Contoh

p::first-line {
    color: #ff0000;
    font-variant: small-caps;
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<p>Kita dapat menggunakan pseudo element ::first-line untuk menambahkan efek khusus pada baris pertama dari sebuah teks. Lebih banyak teks. Dan bahkan lebih, dan lebih banyak lagi, dan lebih banyak lagi, dan lebih banyak lagi, dan lebih banyak lagi, dan lebih banyak lagi, dan lebih banyak lagi, dan lebih banyak lagi, dan lebih banyak lagi, dan lebih banyak lagi, dan lebih banyak lagi, dan banyak lagi. </ P>

</body>
</html>

Hasilnya:

Catatan: pseudo-element ::first-line hanya dapat diterapkan untuk elemen-elemen block-level.

Properti berikut berlaku untuk pseudo-element ::first-line:

properti font
properti color
properti background
word-spacing
letter-spacing
text-decoration
vertical-align
text-transform
line-height
clear

Pseudo-element ::first-letter

Pseudo-element ::first-letter digunakan untuk menambah efek khusus pada huruf pertama dari teks.

Contoh berikut penggunaan pseudo-element ::first-letter pada huruf pertama dari teks di semua elemen <p>.

Contoh

p::first-letter {
    color: #ff0000;
    font-size: xx-large;
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<p>Kita dapat menggunakan pseudo-element ::first-letter untuk menambahkan efek khusus pada karakter pertama teks! </ p>

</body>
</html>

Hasilnya:

Catatan: pseudo-element ::first-letter hanya dapat diterapkan untuk elemen block-level.

Properti berikut berlaku untuk pseudo-element ::first-letter:

properti font
properti color
properti background
properti margin
properti padding
properti border
text-decoration
vertical-align (hanya jika "float" memiliki value "none")
text-transform
line-height
float
clear

Pseudo-element dan CSS Class

Pseudo-elemen dapat dikombinasikan dengan CSS Class.

Contoh

p.intro::first-letter {
    color: #ff0000;
    font-size:200%;
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<p class="intro">Ini adalah introduction.</p>
<p>Ini adalah sebuah paragraf dengan beberapa teks.</p>

</body>
</html>

Hasilnya:

Contoh di atas akan menampilkan huruf pertama paragraf dengan class="intro", berwarna merah dan dalam ukuran yang lebih besar.

Multiple pseudo-element
Beberapa pseudo-element juga bisa digabungkan.

Dalam contoh berikut, huruf pertama paragraf akan menjadi merah, dalam ukuran font huruf besar (xx-large). Sisa baris pertama berwarna biru, dan dalam huruf kecil (small-caps). Sisa paragraf akan menjadi ukuran dan warna font default.

Contoh

p::first-letter {
    color: #ff0000;
    font-size: xx-large;
}

p::first-line {
    color: #0000ff;
    font-variant: small-caps;
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<p>Kita dapat menggabungkan pseudo-element ::first-letter dan ::first-line untuk menambahkan efek khusus pada huruf pertama dan baris pertama teks! </ p>

</body>
</html>

Hasilnya:

Pseudo-element ::before

Pseudo-element ::before dapat digunakan untuk memasukkan beberapa konten sebelum konten dari sebuah elemen.

Contoh berikut menyisipkan gambar sebelum isi / konten dari masing-masing elemen <h1>.

Contoh

h1::before {
    content: url(smiley.gif);
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<h1>Ini adalah heading</h1>
<p>Pseudo-element ::before memasukkan konten sebelum konten suatu elemen.</p>

<h1>Ini adalah heading</h1>
<p><b>Catatan: </b>IE8 mendukung properti konten hanya jika DOCTYPE dideklarasikan. </ p>

</body>
</html>

Hasilnya:

Pseudo-element ::after

Pseudo-element ::after dapat digunakan untuk memasukkan beberapa konten setelah isi / konten sebuah elemen.

Contoh berikut menyisipkan gambar setelah isi / konten dari masing-masing elemen <h1>.

Contoh

h1::after {
    content: url(smiley.gif);
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<h1>Ini adalah heading</h1>
<p>Pseudo-element ::after memasukkan konten setelah konten pada sebuah elemen. </p>

<h1>Ini adalah heading</h1>
<p><b>Catatan: </b>IE8 mendukung properti konten hanya jika DOCTYPE dideklarasikan. </ p>

</body>
</html>

Hasilnya:

Pseudo-element ::selection

Pseudo-element ::selection sesuai dengan porsi elemen yang dipilih oleh pengguna.

Properti CSS berikut dapat diterapkan ke ::selection : color, background, cursor, dan outline.

Contoh berikut ini membuat teks yang dipilih akan berwarna merah dan memiliki background berwarna kuning:

Contoh

::-moz-selection { /* Code untuk mozilla Firefox */
    color: red;
    background: yellow;
}

::selection {
    color: red;
    background: yellow;
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<h1>Pilih beberapa teks di halaman ini:</h1>
<p>Ini adalah paragraf.</p>

<div>Ini adalah beberapa teks dalam elemen div.</div>

<p><strong>Catatan: </strong> ::selection tidak didukung di Internet Explorer 8 dan versi sebelumnya. </ p>
<p><strong>Catatan: </ strong> Firefox mendukung alternatif, properti :: - moz-selection. </ p>

</body>
</html>

Hasilnya:

Catatan: Pilih / blok beberapa teks yang diinginkan, maka akan berubah menjadi teks berwarna merah dan berlatar belakang kuning seperti pada gambar di atas.

Demikian pembahasan mengenai pseudo-element dalam CSS.
Semoga bermanfaat!

Sumber: https://www.w3schools.com