kemntas
09-12-2025, 08:12 AM
Trong CSS, hai pseudo-element mạnh nhất giúp bạn tạo hiệu ứng, trang trí và chèn nội dung mà không cần thêm thẻ HTML chính là:
::before và ::after.
Chúng thường được xem là “vũ khí bí mật” của front-end vì giúp giao diện tinh tế hơn mà code vẫn sạch.
---
1. Pseudo-element là gì?
Pseudo-element là thành phần giả lập, được tạo ra bởi CSS.
Nó không tồn tại trong HTML nhưng có thể được hiển thị như một phần của phần tử thật.
Hai pseudo-element phổ biến nhất:
::before — xuất hiện trước nội dung.
::after — xuất hiện sau nội dung.
---
2. Yêu cầu bắt buộc để dùng ::before và ::after
Bạn bắt buộc phải có:
content: "";
Nếu không khai báo content, pseudo-element sẽ không hiển thị.
---
3. Ví dụ cơ bản – Thêm icon trước tiêu đề
h2::before {
content: "★ ";
color: gold;
}
Kết quả: Tiêu đề được thêm icon mà không cần chỉnh sửa HTML.
---
4. Tạo hiệu ứng highlight đằng sau text
.title {
position: relative;
display: inline-block;
}
.title::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 8px;
background: #ffda79;
z-index: -1;
}
Bạn sẽ có một hiệu ứng như highlight bút dạ rất đẹp và hiện đại.
---
5. Tạo shape và hiệu ứng bằng pseudo-element
Ví dụ – Ribbon góc phải:
.card {
position: relative;
}
.card::after {
content: "";
position: absolute;
top: 0;
right: 0;
border-left: 20px solid transparent;
border-bottom: 20px solid red;
}
Pseudo-element có thể tạo hình tam giác, bóng đổ, nhãn góc, badge… vô cùng đa dạng.
---
6. Tạo overlay dễ dàng
.image {
position: relative;
}
.image::after {
content: "";
position: absolute;
inset: 0;
background: rgba(0,0,0,0.3);
}
Chỉ vài dòng CSS là bạn tạo được lớp tối mờ phủ lên ảnh mà không cần thêm div.
---
7. Khi nào nên dùng ::before và ::after?
Khi bạn muốn trang trí mà không thay đổi HTML.
Khi bạn muốn thêm shape, hiệu ứng, icon nhẹ.
Khi cần tạo overlay, ribbon, label, bóng đổ.
Khi muốn giữ cấu trúc HTML sạch và dễ bảo trì.
---
Kết luận
::before và ::after là hai pseudo-element cực mạnh giúp giao diện của bạn trở nên tinh tế mà không chạm vào HTML. Nếu biết tận dụng đúng cách, bạn có thể tạo ra rất nhiều hiệu ứng đẹp mắt như highlight, ribbon, overlay, icon hoặc background trang trí.
::before và ::after.
Chúng thường được xem là “vũ khí bí mật” của front-end vì giúp giao diện tinh tế hơn mà code vẫn sạch.
---
1. Pseudo-element là gì?
Pseudo-element là thành phần giả lập, được tạo ra bởi CSS.
Nó không tồn tại trong HTML nhưng có thể được hiển thị như một phần của phần tử thật.
Hai pseudo-element phổ biến nhất:
::before — xuất hiện trước nội dung.
::after — xuất hiện sau nội dung.
---
2. Yêu cầu bắt buộc để dùng ::before và ::after
Bạn bắt buộc phải có:
content: "";
Nếu không khai báo content, pseudo-element sẽ không hiển thị.
---
3. Ví dụ cơ bản – Thêm icon trước tiêu đề
h2::before {
content: "★ ";
color: gold;
}
Kết quả: Tiêu đề được thêm icon mà không cần chỉnh sửa HTML.
---
4. Tạo hiệu ứng highlight đằng sau text
.title {
position: relative;
display: inline-block;
}
.title::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 8px;
background: #ffda79;
z-index: -1;
}
Bạn sẽ có một hiệu ứng như highlight bút dạ rất đẹp và hiện đại.
---
5. Tạo shape và hiệu ứng bằng pseudo-element
Ví dụ – Ribbon góc phải:
.card {
position: relative;
}
.card::after {
content: "";
position: absolute;
top: 0;
right: 0;
border-left: 20px solid transparent;
border-bottom: 20px solid red;
}
Pseudo-element có thể tạo hình tam giác, bóng đổ, nhãn góc, badge… vô cùng đa dạng.
---
6. Tạo overlay dễ dàng
.image {
position: relative;
}
.image::after {
content: "";
position: absolute;
inset: 0;
background: rgba(0,0,0,0.3);
}
Chỉ vài dòng CSS là bạn tạo được lớp tối mờ phủ lên ảnh mà không cần thêm div.
---
7. Khi nào nên dùng ::before và ::after?
Khi bạn muốn trang trí mà không thay đổi HTML.
Khi bạn muốn thêm shape, hiệu ứng, icon nhẹ.
Khi cần tạo overlay, ribbon, label, bóng đổ.
Khi muốn giữ cấu trúc HTML sạch và dễ bảo trì.
---
Kết luận
::before và ::after là hai pseudo-element cực mạnh giúp giao diện của bạn trở nên tinh tế mà không chạm vào HTML. Nếu biết tận dụng đúng cách, bạn có thể tạo ra rất nhiều hiệu ứng đẹp mắt như highlight, ribbon, overlay, icon hoặc background trang trí.