Belajar Tailwind CSS #09 Hover, fokus, dan status lainnya part 2
Ahmad Dika Zulfahmi
28 Maret 2025
1. ::before dan ::after
Pseudo-element ::before dan ::after digunakan untuk menambahkan elemen sebelum atau setelah konten utama suatu elemen.
Contoh: Menambahkan tanda bintang (*) pada label formulir
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tailwind CSS</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<label>
<span class="text-gray-700 after:ml-0.5 after:text-red-500 after:content-['*']">
Email
</span>
<input type="email" name="email" placeholder="you@example.com" />
</label>
</body>
</html>
Di sini, after:content-['*'] menambahkan bintang merah setelah teks Email.
Namun, dalam banyak kasus, lebih baik menggunakan elemen <span> biasa daripada ::before atau ::after karena lebih mudah dibaca dan lebih fleksibel.
berikut hasilnya:
2. ::placeholder
Pseudo-element ::placeholder digunakan untuk mengubah tampilan teks placeholder dalam elemen <input> atau <textarea>.
Contoh: Mengubah warna dan gaya placeholder
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tailwind CSS</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<input class="placeholder:text-gray-500 placeholder:italic" placeholder="Search for anything..." type="text" />
</body>
</html>
placeholder:text-gray-500: Mengubah warna placeholder menjadi abu-abu.
placeholder:italic: Membuat teks placeholder menjadi miring.
berikut hasilnya:
3. ::file
Digunakan untuk mengubah tampilan tombol unggah file pada elemen <input type="file">.
Contoh: Styling tombol unggah file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tailwind CSS</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<input type="file" class="file:mr-4 file:rounded-full file:border-0 file:bg-violet-50 file:px-4 file:py-2 file:text-sm file:font-semibold file:text-violet-700 hover:file:bg-violet-100" />
</body>
</html>
file:bg-violet-50: Mengubah latar belakang tombol menjadi ungu muda.
file:rounded-full: Membuat tombol menjadi bulat.
hover:file:bg-violet-100: Mengubah warna saat tombol di-hover.
berikut hasilnya:
4. ::marker
Digunakan untuk mengubah tampilan ikon bullet atau angka pada daftar (<ul> atau <ol>).
Contoh: Mengubah warna bullet list
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tailwind CSS</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<ul class="list-disc marker:text-sky-400">
<li>5 cups chopped Porcini mushrooms</li>
<li>1/2 cup of olive oil</li>
<li>3lb of celery</li>
</ul>
</body>
</html>
marker:text-sky-400: Mengubah warna bullet menjadi biru muda.
berikut hasilnya:
5. ::selection
Digunakan untuk mengubah tampilan teks yang sedang disorot atau dipilih pengguna.
Contoh: Mengubah warna teks yang dipilih
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tailwind CSS</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="selection:bg-fuchsia-300 selection:text-fuchsia-900">
<p>Pilih teks ini untuk melihat efeknya.</p>
</div>
</body>
</html>
selection:bg-fuchsia-300: Mengubah warna latar belakang teks yang dipilih menjadi ungu muda.
selection:text-fuchsia-900: Mengubah warna teks yang dipilih menjadi ungu tua.
berikut hasilnya:
6. ::first-line dan ::first-letter
::first-line: Mengubah tampilan baris pertama dalam paragraf.
::first-letter: Mengubah tampilan huruf pertama dalam paragraf.
Contoh: Membuat huruf pertama lebih besar dan mencolok
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tailwind CSS</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<p class="first-letter:text-7xl first-letter:font-bold first-line:uppercase">
Ini adalah contoh teks dengan efek khusus pada baris dan huruf pertama.
</p>
</body>
</html>
first-letter:text-7xl: Membuat huruf pertama lebih besar.
first-letter:font-bold: Membuat huruf pertama menjadi tebal.
first-line:uppercase: Mengubah baris pertama menjadi huruf kapital semua.
berikut hasilnya:
7. ::backdrop
Digunakan untuk mengubah tampilan latar belakang elemen <dialog> yang sedang aktif.
Contoh: Mengubah warna latar belakang dialog
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tailwind CSS</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<dialog class="backdrop:bg-gray-50">
<form method="dialog">
<button>Tutup</button>
</form>
</dialog>
</body>
</html>
backdrop:bg-gray-50: Mengubah warna latar belakang menjadi abu-abu terang.
Artikel Lainnya Dengan Kategori Terkait :
1. Belajar Tailwind CSS #01 Instalasi Tailwind CSS
2. Belajar Tailwind CSS #02 Editor Setup di Tailwind CSS
3. Belajar Tailwind CSS #03 Compatibility di Tailwind CSS
4. Belajar Tailwind CSS #04 Upgrade dari Tailwind CSS v3 ke v4
5. Belajar Tailwind CSS #05 Perubahan di Tailwind CSS v4 dengan v3
6. Belajar Tailwind CSS #06 Styling dengan Utility Classes part 1
7. Belajar Tailwind CSS #07 Styling dengan Utility Classes part 2
8. Belajar Tailwind CSS #08 Hover, fokus dan status lainnya part 1
9. Belajar Tailwind CSS #09 Hover, fokus, dan status lainnya part 2
10. Belajar Tailwind CSS #10 Hover, fokus, dan status lainnya part 3
11. Belajar Tailwind CSS #11 Hover, fokus, dan status lainnya part 4
12. Belajar Tailwind CSS #12 Hover, fokus, dan status lainnya part 5
13. Belajar Tailwind CSS #13 Responsive design part 1
14. Belajar Tailwind CSS #14 Responsive design part 2
15. Belajar tailwind CSS #15 Responsive design part 3
16. Belajar Tailwind CSS #16 Dark Mode di Tailwind
17. Belajar Tailwind CSS #17 Theme Variables part 1
18. Belajar Tailwind CSS #18 Theme Variables part 2
19. Belajar Tailwind CSS #19 Theme Variables part 3
20. Belajar Tailwind CSS #20 Tailwind CSS - Colors part 1
21. Belajar Tailwind CSS #21 Tailwind - Colors part 2
22. Belajar Tailwind CSS #22 Adding custom styles part 1
23. Belajar Tailwind CSS #23 Adding custom styles part 2
24. Belajar Tailwind CSS #24 Adding custom styles part 3
25. Belajar Tailwind CSS #25 Detecting classes in soure files
26. Belajar Tailwind CSS #26 Functions and directives
27. Belajar Tailwind CSS #27 Preflight Tailwind CSS
28. Belajar Tailwind CSS #28 Aspect-Ratio Tailwind CSS
29. Belajar Tailwind CSS #29 Tailwind CSS columns
30. Belajar Tailwind CSS #30 Tailwind CSS Break-After
31. Belajar Tailwind CSS #31 Tailwind CSS Break-Before
32. Belajar Tailwind CSS #32 Break-Inside Tailwind CSS
33. Belajar Tailwind CSS #33 Box Decoration Break Tailwind CSS
34. Belajar Tailwind CSS #34 Box Sizing Tailwind CSS
35. Belajar Tailwind CSS #35 Tailwind CSS Display
36. Belajar Tailwind CSS #36 Tailwind CSS Float
37. Belajar tailwind CSS #37 Tailwind CSS Clear
38. Belajar Tailwind CSS #38 Tailwind CSS Isolation
39. Belajar Tailwind CSS #39 Tailwind CSS Object-fit
40. Belajar Tailwind CSS #40 Tailwind CSS Object-position
41. Belajar Tailwind CSS #41 Overflow Tailwind CSS
42. Belajar Tailwind CSS #42 Tailwind CSS overscroll-behavior
43. Belajar Tailwind CSS #43 Tailwind CSS Position
44. Belajar Tailwind CSS #44 Tailwind CSS top,right,bottom,left
45. Belajar Tailwind CSS #45 Visibility di Tailwind CSS
46. Belajar Tailwind CSS #46 Z-index di Tailwind CSS
47. Belajar Tailwind CSS #47 Tailwind CSS flex-basis
48. Belajar Tailwind CSS #48 Flex-direction Tailwind CSS
49. Belajar Tailwind CSS #49 Flex-wrap Tailwind CSS
50. Belajar Tailwind CSS #50 Flex Tailwind CSS
51. Belajar Tailwind CSS #51 Flex-grow Tailwind CSS
52. Belajar Tailwind CSS #52 Flex-shrink Tailwind CSS
53. Belajar Tailwind CSS #53 Tailwind CSS order
54. Belajar Tailwind CSS #54 Grid-template-columns Tailwind CSS
55. Belajar Tailwind CSS #55 Grid-column Tailwind CSS
56. Belajar Tailwind CSS #56 Grid-template-rows Tailwind CSS
57. Belajar Tailwind CSS #57 Grid-row Tailwind CSS
58. Belajar Tailwind CSS #58 Grid-auto-flow Tailwind CSS
59. Belajar Tailwind CSS #59 Grid-auto-columns Tailwind CSS
60. Belajar Tailwind CSS #60 Grid-auto-rows Tailwind CSS
61. Belajar Tailwind CSS #61 Gap di Tailwind CSS
62. Belajar Tailwind CSS #62 Justify-content di Tailwind CSS
63. Belajar Tailwind CSS #63 Justify-items di Tailwind CSS
64. Belajar Tailwind CSS #64 Justify-self di Tailwind CSS
65. Belajar Tailwind CSS #65 Align-content di Tailwind CSS
66. Belajar Tailwind CSS #66 Align-items di Tailwind CSS
67. Belajar Tailwind CSS #67 Align-self di Tailwind CSS
68. Belajar Tailwind CSS #68 Place-content di Tailwind CSS
