Before and After

Trong CSS có hai thuộc tính dùng để bổ sung thành phần vào đằng trước và đằng sau thẻ HTML đó là thuộc tính after và before, hai thuộc tính này được dùng rất nhiều khi xây dựng layout website. Không những vậy mà các Framework CSS hay FontAwesome cũng sử dụng hai thuộc tính này để tạo icon. Bạn có thể bổ sung bất cứ gì đằng trước và đằng sau thẻ HTML bằng cách sử dụng after và before. Cú pháp của nó như sau:

::before và ::after trong CSS (nhiều lúc thường ghi là :before và :after) là những phần tử giả (pseudo element). div, span,… chẳng hạn, là những phần tử thật tồn tại trên file HTML. CSS chủ yếu được dùng để định dạng các phần tử HTML. Tuy nhiên, trong một số trường hợp cần thiết, CSS cũng hỗ trợ chèn nội dung mà không làm ảnh hưởng đến file mã HTML. ::before và ::after được sử dụng trong tình huống đó, nên chúng được gọi là những phần tử giả.

::before được dùng để chèn nội dung vào trước nội dung đang có của phần tử. ::after được dùng để chèn nội dung vào sau nội dung đang có của phần tử. Về mặt hiển thị, chúng sẽ xuất hiện trên giao diện trang web, nhưng nếu bạn bấm view source, bạn sẽ không thấy chúng xuất hiện trên mã HTML.

style.css
p::before {
	*content: "NGUYEN -";
	*background-color: yellow;
	*color: red;
	*font-weight: bold;
}
index.html
My name is BaoNguyen
Preview

My name is BaoNguyen

Home
TOP