Pseudo-element là một từ khóa được thêm vào selector để bạn tạo kiểu cho phần tử. Ví dụ, bạn tạo kiểu dòng đầu của đoạn văn, thêm nội dung trước hoặc sau phần tử. Bạn có thể tạo hiệu ứng phức tạp với mã tối thiểu. Pseudo-element được biểu thị bằng dấu hai chấm đôi (::) (hoặc : trong CSS cũ).
Syntax
selector::pseudo-element{
property: value
}:: (Dấu hai chấm đôi là cú pháp cho pseudo-elements)
Commonly Used CSS Pseudo-Elements
. ::before
Pseudo-element ::before cho phép bạn chèn nội dung trước nội dung thực tế của một phần tử.
HTML<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->
<style>
p::before {
content: "✨ ";
color: gold;
}
</style>
<!--Driver Code Starts-->
</head>
<body>
<p>This is a paragraph.</p>
</body>
</html>
<!--Driver Code Ends-->
. ::after
Tương tự ::before, pseudo-element ::after chèn nội dung sau nội dung của phần tử. Nó thường được dùng để thêm biểu tượng, gợi ý tạo kiểu hoặc thông tin chi tiết bổ sung.
HTML<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->
<style>
p::after {
content: " 🔥";
color: red;
}
</style>
<!--Driver Code Starts-->
</head>
<body>
<p>This is a paragraph.</p>
</body>
</html>
<!--Driver Code Ends-->
. ::first-letter
Pseudo-element ::first-letter nhắm mục tiêu vào chữ cái đầu tiên của một khối văn bản. Thường được sử dụng cho chữ cái đầu trang trí trong đoạn văn.
HTML<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->
<style>
p::first-letter {
font-size: 2em;
color: blue;
}
</style>
<!--Driver Code Starts-->
</head>
<body>
<p>This is a paragraph.</p>
</body>
</html>
<!--Driver Code Ends-->
. ::first-line
Pseudo-element ::first-line dùng để tạo kiểu cho dòng đầu tiên của khối văn bản. Nó đặc biệt hữu ích để nhấn mạnh phần giới thiệu của đoạn văn.
HTML<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->
<style>
p::first-line {
font-weight: bold;
color: green;
}
</style>
<!--Driver Code Starts-->
</head>
<body>
<p>This is a longer paragraph to demonstrate the <br>
first-line styling in action.</p>
</body>
</html>
<!--Driver Code Ends-->
. ::placeholder
Pseudo-element ::placeholder tạo kiểu cho văn bản placeholder bên trong các trường input.
HTML<!--Driver Code Starts-->
<html>
<head>
<style>
<!--Driver Code Ends-->
input::placeholder {
color: gray;
font-style: italic;
}
</style>
</head>
<!--Driver Code Starts-->
</body>
<input type="text" placeholder="Enter your name">
</body>
</html>
<!--Driver Code Ends-->
. ::marker
Tạo kiểu cho marker của các mục danh sách.
HTML<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->
<style>
li::marker {
color: purple;
font-size: 1.5em;
}
</style>
<!--Driver Code Starts-->
</head>
<body>
<ul>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ul>
</body>
</html>
<!--Driver Code Ends-->
. ::selection
Tạo kiểu cho văn bản đã chọn.
HTML<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->
<style>
::selection {
background: yellow;
color:green;
}
</style>
<!--Driver Code Starts-->
</head>
<body>
<p>Select some text in this paragraph to see the effect.</p>
</body>
</html>
<!--Driver Code Ends-->
. ::backdrop
Tạo kiểu cho backdrop của các phần tử modal như <dialog>. Nó giúp tạo kiểu background của hộp thoại được mở như modal trên màn hình người dùng.
HTML<!--Driver Code Starts-->
<html>
<head>
<style>
<!--Driver Code Ends-->
dialog::backdrop {
background: rgba(232, 233, 0, 0.5);
}
<!--Driver Code Starts-->
dialog {
border: none;
padding: 20px;
background: white;
}
</style>
</head>
<body>
<dialog id="myDialog">This is a dialog box.</dialog>
<script>
const dialog = document.getElementById("myDialog");
if (dialog) {
dialog.showModal();
}
</script>
</body>
</html>
<!--Driver Code Ends-->
Pseudo-elements for Specific Contexts
::file-selector-button for Media and Interactivity
Selector pseudo-element này giúp tạo kiểu cho nút của một input type file.
HTML<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->
<style>
::file-selector-button {
background-color: #4CAF50;
color: white;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
}
::file-selector-button:hover {
background-color: #45a049;
}
</style>
</head>
<body>
<!--Driver Code Starts-->
<h2>Custom File Selector Button</h2>
<input type="file">
</body>
</html>
<!--Driver Code Ends-->
::spelling-error for Error Handling
Pseudo-element ::spelling-error tạo kiểu cho văn bản bị đánh dấu lỗi chính tả. Chức năng này được cung cấp bởi trình kiểm tra chính tả của trình duyệt.
HTML<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->
<style>
::spelling-error {
background-color: #ffdddd;
text-decoration: underline solid red;
}
</style>
<!--Driver Code Starts-->
</head>
<body>
<h2>Spelling Error Detection</h2>
<input type="text" value="Ths is a splling eror" spellcheck="true">
</body>
</html>
<!--Driver Code Ends-->