Phần tử giả :after trong CSS
Trần Thị Vân - 1508
- 15/07/2025
Chức năng của Phần tử giả :after trong CSS
Phần tử giả :after 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 phải hoặc góc dưới của thẻ HTML.
Ví dụ Phần tử giả :after trong CSS
Để dùng được :after thì thẻ HTML được dùng phải đặt position: relative, sau đó ở after phải đặt position: absolute; content: ""; phần còn lại là quy định cách hiển thị của after, ở đây mình css là bottom: -5px; height: 3px; left: 0; background: #f8b416;width:50px;
#ptgat:after{
position: absolute;
content: "";
bottom: -5px;
height: 3px;
left: 0px;
background: #f8b416;
width:50px;
}
<!DOCTYPE html>
<html>
<head>
<title>Chạy thử Ví dụ Phần tử giả :after trong CSS</title>
<style>
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
#ptgat{width:100%;float:left;height:auto;position: relative;text-transform: uppercase;}
#ptgat:after{
position: absolute;
content: "";
bottom: -5px;
height: 3px;
left: 0px;
background: #f8b416;
width:50px;
}
</style>
</head>
<body>
<h1>Chạy thử Ví dụ Phần tử giả :after trong CSS</h1>
<p>Phần tử giả :after 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 phải hoặc góc dưới của thẻ HTML.</p>
<p>Để dùng được :after thì thẻ HTML được dùng phải đặt position: relative, sau đó ở after phải đặt position: absolute; content: ""; phần còn lại là quy định cách hiển thị của after, ở đây mình css là bottom: -5px; height: 3px; left: 0; background: #f8b416;width:50px;</p>
<div id="ptgat">Chạy thử Ví dụ Phần tử giả :after trong CSS</div>
</body>
</html>
Ứng dụng ::after để tạo hiệu ứng và thành phần trang trí
Điểm mạnh của ::after nằm ở khả năng tạo thêm một vùng nội dung ảo phía sau phần tử mà không cần bổ sung thẻ HTML. Nhờ đó, CSS có thể đảm nhiệm nhiều chi tiết mang tính trang trí như đường kẻ, dấu nhấn, biểu tượng hoặc hiệu ứng khi người dùng tương tác.
Khi sử dụng ::after, nên kết hợp với content và các thuộc tính định vị, kích thước để kiểm soát chính xác phần tử được tạo ra. Cách làm này giúp HTML gọn hơn và hạn chế việc thêm các phần tử chỉ phục vụ mục đích trình bày.
Tạo đường kẻ, biểu tượng và hiệu ứng chuyển động bằng ::after
Một ứng dụng phổ biến là tạo đường kẻ trang trí bên dưới tiêu đề. Phần tử giả có thể được đặt thành một dải nhỏ với chiều rộng, chiều cao và màu sắc riêng, sau đó thay đổi khi người dùng đưa chuột vào.
.title {
position: relative;
}
.title::after {
content: "";
display: block;
width: 50px;
height: 3px;
margin-top: 8px;
background: #f4a300;
transition: width 0.3s ease;
}
.title:hover::after {
width: 100px;
}
Cách triển khai này phù hợp với tiêu đề, liên kết hoặc các khu vực cần một điểm nhấn trực quan. Nếu không cần hiển thị văn bản, content có thể để giá trị rỗng nhưng vẫn phải khai báo để phần tử giả được tạo ra.
Kết hợp ::after với position để kiểm soát vị trí hiển thị
Khi cần đặt phần tử giả chồng lên một vị trí cụ thể, có thể dùng position: absolute cho ::after và đặt phần tử cha làm mốc bằng position: relative. Đây là cách hữu ích khi tạo lớp phủ, gạch chân tùy biến hoặc các chi tiết nằm sát cạnh một phần tử.
.button {
position: relative;
display: inline-block;
}
.button::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 2px;
background: #f4a300;
transform: scaleX(0);
transform-origin: left;
transition: transform 0.3s ease;
}
.button:hover::after {
transform: scaleX(1);
}
Trong trường hợp này, left và bottom xác định vị trí bắt đầu, còn transform tạo hiệu ứng mở rộng đường kẻ. Cách kết hợp này giúp hiệu ứng có chuyển động mượt mà mà không cần thêm một phần tử HTML riêng.
Lời kết
Cảm ơn các bạn đã tham khảo bài viết Phần tử giả :after 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 *
