Chạy thử Ví dụ Phần tử giả :after trong CSS

Chạy thử Ví dụ Phần tử giả :after trong CSS

Chạy thử Ví dụ Phần tử giả :after trong CSS

Tự code rồi chạy thử... Chạy Thử 
<!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ử Ví dụ Phần tử giả :after trong CSS nằm trong bài viết Phần tử giả :after trong CSS