6.1 Thuộc tính content
Pseudo-element ::before và ::after cho phép thêm nội dung trước và sau nội dung của phần tử, mà không cần thay đổi mã HTML.
Chúng được sử dụng rộng rãi cho mục đích trang trí, cải thiện giao diện người dùng và tạo ra các trang web tương tác hơn.
Pseudo-element ::before và ::after là gì?
Pseudo-element ::before và ::after tạo ra các phần tử ảo, được chèn vào trước và sau
nội dung của phần tử được chọn. Những pseudo-element này thường được sử dụng để thêm biểu tượng, yếu tố trang trí,
hoặc các hiệu ứng hình ảnh khác.
Cú pháp before:
selector::before {
content: "text hoặc các giá trị khác";
/* styles */
}
Cú pháp after:
selector::after {
content: "text hoặc các giá trị khác";
/* styles */
}
Thuộc tính content
Thuộc tính chính cho pseudo-element ::before và ::after là content. Thuộc tính này xác định nội dung của
pseudo-element. Nó có thể là một chuỗi văn bản, hình ảnh, hoặc thậm chí là giá trị trống nếu chỉ cần hiệu ứng hình ảnh.
Các giá trị có thể cho thuộc tính content:
- Văn bản:
"text" - Hình ảnh:
url("path/to/image.png") - Giá trị trống:
"" - Attributes:
attr(attributeName) - Counters:
counter(name)
6.2 Ví dụ sử dụng ::before và ::after
Thêm các yếu tố trang trí
Ví dụ 1: Thêm biểu tượng trước văn bản
Trong ví dụ này, pseudo-element ::before được sử dụng để thêm biểu tượng trước văn bản của liên kết.
margin-right thêm khoảng cách giữa biểu tượng và văn bản:
/* Thêm biểu tượng trước văn bản của liên kết */
a::before {
content: "🔗";
margin-right: 5px;
}
Ví dụ 2: Thêm yếu tố trang trí sau đoạn văn bản
Trong ví dụ này, pseudo-element ::after thêm yếu tố trang trí sau đoạn văn bản. display: block và
text-align: right được sử dụng để căn chỉnh yếu tố theo cạnh phải:
/* Thêm yếu tố trang trí sau đoạn văn bản */
p::after {
content: "❦";
display: block;
text-align: right;
color: red;
}
Tạo khung và nền trang trí
Ví dụ 3: Khung trang trí quanh phần tử
Trong ví dụ này, pseudo-element ::before được sử dụng để tạo dải trang trí trên phần tử
div. position: absolute và top: -10px cho phép định vị dải trên phần tử:
/* Khung trang trí quanh phần tử */
div::before {
content: "";
display: block;
width: 100%;
height: 10px;
background-color: #3498db;
position: absolute;
top: -10px;
left: 0;
}
Ví dụ 4: Tự động thêm dấu ngoặc kép
Trong ví dụ này, pseudo-element ::before và ::after được sử dụng để thêm dấu ngoặc kép quanh khối trích dẫn:
/* Tự động thêm dấu ngoặc kép quanh trích dẫn */
blockquote::before {
content: "“";
font-size: 2em;
color: #ccc;
}
blockquote::after {
content: "”";
font-size: 2em;
color: #ccc;
}
Ví dụ 5: Đánh số tiêu đề
Trong ví dụ này, pseudo-element ::before được sử dụng để thêm số trước tiêu đề h2.
counter-increment tăng giá trị biến đếm, và content: counter(section) chèn giá trị hiện tại của biến đếm:
/* Đánh số tiêu đề */
h2::before {
counter-increment: section;
content: counter(section) ". ";
font-weight: bold;
}
6.3 Áp dụng và tạo kiểu cho pseudo-element
Tạo kiểu cho pseudo-element
Pseudo-element có thể được tạo kiểu giống như bất kỳ phần tử nào khác. Chúng hỗ trợ hầu hết các thuộc tính CSS, bao gồm màu sắc, nền, biên, kích thước và định vị.
Sử dụng pseudo-element để tạo bố cục phức tạp
Pseudo-element thường được sử dụng để tạo ra các yếu tố trang trí trong bố cục, như khung, bóng và các hiệu ứng hình ảnh khác, mà không cần thêm các phần tử HTML bổ sung.
Ví dụ: mỗi phần tử danh sách sẽ có dấu chấm xanh trước văn bản:
ul li::before {
content: "•";
color: blue;
margin-right: 5px;
}
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
6.4 Ví dụ hoàn chỉnh
/* Thêm biểu tượng trước văn bản của liên kết */
a::before {
content: "🔗";
margin-right: 5px;
}
/* Thêm yếu tố trang trí sau đoạn văn bản */
p::after {
content: "❦";
display: block;
text-align: right;
color: red;
}
/* Khung trang trí quanh phần tử */
.decorative-box {
position: relative;
}
.decorative-box::before {
content: "";
display: block;
width: 100%;
height: 10px;
background-color: #3498db;
position: absolute;
top: -10px;
left: 0;
}
/* Tự động thêm dấu ngoặc kép quanh trích dẫn */
blockquote::before {
content: "“";
font-size: 2em;
color: #ccc;
}
blockquote::after {
content: "”";
font-size: 2em;
color: #ccc;
}
/* Đánh số tiêu đề */
h2::before {
counter-increment: section;
content: counter(section) ". ";
font-weight: bold;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ví dụ về pseudo-element ::before và ::after</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<a href="#">Liên kết với biểu tượng</a>
<p>Đoạn văn với yếu tố trang trí sau văn bản</p>
<div class="decorative-box">Phần tử với khung trang trí</div>
<blockquote>Trích dẫn với dấu ngoặc kép tự động</blockquote>
<h2>Tiêu đề với đánh số</h2>
<h2>Một tiêu đề khác</h2>
</body>
</html>
GO TO FULL VERSION