Phần tử giả :before trong CSS
Trần Thị Vân - 1448
- 14/07/2025
Chức năng của Phần tử giả :before trong CSS
Phần tử giả :before trong CSS trang trí thêm cho một thẻ HTML đã có sẵn trước đó mà không cần phải thay đổi bố cục giao diện, cách trang trí thường nằm ở vị trí bên trái hoặc góc trên của thẻ HTML.
Ví dụ Phần tử giả :before trong CSS
Để dùng được :before thì thẻ HTML được dùng phải đặt position: relative, sau đó ở before phải đặt position: absolute; content: ""; phần còn lại là quy định cách hiển thị của before, ở đây mình css là bottom: -5px; height: 3px; left: 0; background: #f8b416;width:50px;
#ptgbf:before{
position: absolute;
content: "";
bottom: -5px;
height: 3px;
left: 0;
background: #f8b416;width:50px;
}
<!DOCTYPE html>
<html>
<head>
<title>Chạy thử Ví dụ Phần tử giả :before trong CSS</title>
<style>
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
#ptgbf{width:100%;float:left;height:auto;position: relative;text-transform: uppercase;}
#ptgbf:before{position: absolute; content: ""; bottom: -5px; height: 3px; left: 0; background: #f8b416;width:50px;}
</style>
</head>
<body>
<h1>Chạy thử Ví dụ Phần tử giả :before trong CSS</h1>
<p>Phần tử giả :before trong CSS trang trí thêm cho một thẻ HTML đã có sẵn trước đó mà không cần phải thay đổi bố cục giao diện, cách trang trí thường nằm ở vị trí bên trái hoặc góc trên của thẻ HTML:</p>
<p>Để dùng được :before thì thẻ HTML được dùng phải đặt position: relative, sau đó ở before phải đặt position: absolute; content: ""; phần còn lại là quy định cách hiển thị của before, ở đây mình css là bottom: -5px; height: 3px; left: 0; background: #f8b416;width:50px;</p>
<div id="ptgbf">Chạy thử Ví dụ Phần tử giả :before trong CSS</div>
</body>
</html>
Những cách ứng dụng ::before trong CSS thực tế
Không chỉ dùng để thêm nội dung trước một phần tử, ::before còn rất hữu ích khi tạo các chi tiết trang trí, đường kẻ, lớp nền hoặc hiệu ứng mà không cần bổ sung thêm phần tử HTML. Cách làm này giúp cấu trúc HTML gọn hơn và cho phép xử lý nhiều hiệu ứng hoàn toàn bằng CSS.
Trang trí và tạo điểm nhấn cho phần tử
::before có thể tạo một chi tiết nhỏ nằm trước nội dung như dấu chấm, thanh màu, đường kẻ hoặc mảng nền. Đây là cách phù hợp để làm nổi bật tiêu đề, menu, thông báo hoặc các khối nội dung mà không phải thêm phần tử phụ vào HTML.
.title {
position: relative;
padding-left: 16px;
}
.title::before {
content: "";
position: absolute;
left: 0;
top: 4px;
width: 4px;
height: calc(100% - 8px);
background: #f4a300;
border-radius: 4px;
}
Trong ví dụ trên, ::before tạo một thanh màu đứng trước tiêu đề. Phần tử giả được định vị dựa trên phần tử cha nên có thể thay đổi vị trí, kích thước và hình dạng mà không ảnh hưởng đến nội dung chính.
Tạo hiệu ứng mà không cần thêm HTML
Một ưu điểm đáng chú ý của ::before là có thể tạo lớp phủ, đường chuyển màu, góc trang trí hoặc hiệu ứng khi rê chuột mà không cần thêm thẻ HTML chỉ để phục vụ giao diện.
.button {
position: relative;
overflow: hidden;
}
.button::before {
content: "";
position: absolute;
inset: 0;
background: rgba(255, 255, 255, 0.15);
transform: translateX(-100%);
transition: transform 0.3s ease;
}
.button:hover::before {
transform: translateX(0);
}
Cách này đặc biệt hữu ích với các hiệu ứng giao diện đơn giản. Tuy nhiên, ::before nên được dùng cho phần trang trí hoặc hiệu ứng, không nên chứa thông tin quan trọng mà người dùng cần đọc hoặc công cụ tìm kiếm cần hiểu.
Lời kết
Cảm ơn các bạn đã tham khảo bài viết Phần tử giả :before trong CSS.
- 0 Bình luận
Email, Điện thoại của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *
