Phần tử giả :after trong CSS

Phần tử giả :after trong CSS
Phần tử giả :after trong CSS

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>

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ả :after trong CSS.

  • ★★★★★ ★★★★★
  • 0 Bình luận
Trần Thị Vân | Content Creator Web Mới
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ả :after 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 *
Đánh giá của bạn
Tên *
Email
Số điện thoại *
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