9.1 Pseudo-element ::before và ::after
Pseudo-element ::before và ::after là công cụ mạnh mẽ trong CSS, cho phép thêm các phần tử trang trí
trước hoặc sau nội dung của một phần tử mà không cần thay đổi HTML. Chúng thường được sử dụng để tạo hiệu ứng
hình ảnh, cải thiện giao diện người dùng và thêm kiểu dáng cho các phần tử.
Mô tả:
::before: pseudo-element, thêm trước nội dung của phần tử::after: pseudo-element, thêm sau nội dung của phần tử
Cú pháp:
element::before {
/* kiểu dáng cho pseudo-element before */
}
element::after {
/* kiểu dáng cho pseudo-element after */
}
Các thuộc tính chính
Pseudo-element ::before và ::after có thể chứa hầu như bất kỳ thuộc tính CSS nào, bao gồm màu sắc, kích thước,
định vị, nền, bóng đổ, v.v. Tuy nhiên, để pseudo-element hiển thị, cần phải đặt nội dung và kích thước.
content: đặt nội dung cho pseudo-element. Có thể là văn bản hoặc hình ảnh, cũng có thể là chuỗi trốngdisplay: thiết lập kiểu hiển thị cho pseudo-element. Thường sử dụngblockhoặcinline-blockposition: quản lý vị trí của pseudo-element (ví dụ,absolutehoặcrelative)widthvàheight: thiết lập kích thước cho pseudo-element
9.2 Thêm văn bản
Bằng cách sử dụng thuộc tính content, có thể dễ dàng thêm văn bản vào đầu hoặc cuối bất kỳ phần tử nào.
.example::before {
content: "Đầu: ";
color: blue;
}
.example::after {
content: " :Cuối";
color: red;
}
<body>
<p class="example">Đây là một ví dụ văn bản</p>
</body>
Giải thích mã:
.example::before: thêm văn bản "Đầu: " trước nội dung của phần tử và tô màu xanh.example::after: thêm văn bản " :Cuối" sau nội dung của phần tử và tô màu đỏ
9.3 Đường kẻ trang trí
Cũng có thể thêm các đường kẻ trang trí bao quanh nội dung:
.decorative-line::before,
.decorative-line::after {
content: "";
display: block;
height: 2px;
background: black;
margin: 10px 0;
}
<body>
<div class="decorative-line">Văn bản với các đường kẻ trang trí</div>
</body>
Giải thích mã:
.decorative-line::before: tạo đường kẻ trang trí trước nội dung của phần tử.decorative-line::after: tạo đường kẻ trang trí sau nội dung của phần tử
9.4 Chèn biểu tượng
Cần thêm chút hình ảnh? Dễ dàng chèn biểu tượng:
.icon::before {
content: url('https://via.placeholder.com/20');
display: inline-block;
vertical-align: middle;
margin-right: 5px;
}
<body>
<p class="icon">Văn bản với biểu tượng</p>
</body>
Giải thích mã:
.icon::before: thêm biểu tượng trước văn bản, sử dụng URL hình ảnh
9.5 Phần tử trang trí phức tạp
Cùng thử thêm phần tử trang trí phức tạp hơn:
.complex-decor::before {
content: "";
display: block;
width: 50px;
height: 50px;
background: linear-gradient(45deg, #f06, transparent);
position: absolute;
top: -10px;
left: -10px;
}
.complex-decor {
position: relative;
padding: 20px;
background: #eee;
margin: 20px;
}
<body>
<div class="complex-decor">Phần tử với góc trang trí</div>
</body>
Giải thích mã:
.complex-decor::before: tạo phần tử trang trí trước nội dung chính, sử dụng gradient và định vị tuyệt đối.complex-decor: thiết lập định vị tương đối cho phần tử cha, để pseudo-element có thể định vị tương đối với nó
9.6 Sử dụng animation
Có thể thêm cả animation:
.animated::before {
content: "";
display: block;
width: 100px;
height: 100px;
background: red;
animation: rotate 5s infinite;
margin: 20px auto;
}
@keyframes rotate {
0% { transform: rotate(0deg); }
50% { transform: rotate(180deg); }
100% { transform: rotate(360deg); }
}
<body>
<div class="animated"></div>
</body>
Giải thích mã:
.animated::before: tạo pseudo-element hình vuông và tạo animation xoay sử dụng @keyframes
GO TO FULL VERSION