Phần tử giả :before trong CSS

Trần Thị Vân
1400
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>

Chạy Thử

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.

★★★★★ ★★★★★
5/5 - (1 Đánh giá)
0 Bình luận

Trần Thị Vân

Trần Thị Vân là Content Creator tại Web Mới, phụ trách nghiên cứu, biên soạn nội dung và chia sẻ kiến thức về website, SEO, lập trình cùng các xu hướng công nghệ

Chia sẻ nội dung đánh giá của bạn về Phần tử giả :before trong CSS
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 *

Bình luận, Hỏi đáp

Đăng ký tư vấn thiết kế website

Tìm hiểu 1 năm không bằng lắng nghe 1 câu tư vấn