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

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

Chạy thử Ví dụ Phần tử giả :before 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ả :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ử Ví dụ Phần tử giả :before trong CSS nằm trong bài viết Phần tử giả :before trong CSS