CSS 20 – After và Before trong CSS

0
248

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 afterbefore, 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.

After và Before trong CSS

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:

Bây giờ chúng ta cùng tìm hiểu chi tiết hơn nhé.

After trong CSS

After dùng để thêm nội dung vào đằng sau thẻ HTML.

Ví dụ, cho đoạn HTML như sau:

CSS cho đoạn HTML trên sử dụng after:

Rõ ràng trong HTML mình chỉ có dòng “Chào mừng bạn đến với” vậy mà khi chạy lên lại xuất hiện dòng “Chào mừng bạn đến với trang học lập trình Thầy giáo quốc dân“. Lý do là trong thuộc tính after mình có bổ sung một thuộc tính CSS content:" trang học lập trình Thầy giáo quốc dân" nên nó nối vào đằng sau.

Before trong CSS

Before dùng để thêm nội dung vào đằng trước thẻ HTML.

Ví dụ, cho đoạn HTML như sau:

CSS cho đoạn HTML trên sử dụng after:

Rõ ràng trong HTML mình chỉ có dòng “xin chào các bạn!” vậy mà khi chạy lên lại xuất hiện dòng “Thầy giáo quốc dân xin chào các bạn“. Lý do là trong thuộc tính before mình có bổ sung một thuộc tính CSS content:"Thầy giáo quốc dân " nên nó nối vào đằng trước.

Một số lưu ý khi sử dụng after và before trong CSS

  • Nội dung mà bạn thêm vào bằng thuộc tính after hoặc before sẽ không thể dùng chuột bôi đen và copy được, không tin bạn hãy copy những dòng chữ ở hai ví dụ trong phần 1.
  • Ta có thể coi After và Before giống như hai thẻ HTML bình thường nên bạn có thể sử dụng hầu hết các thuộc tính CSS trên chúng.
  • Nếu bạn để ý kỹ thì theo mặc định after và before sẽ có mặc định là display:inline-block.

Kết luận

Ngoài các ví dụ trên thì after và before thường được sử dụng nhất ở các CSS Font Library như FontAwesom, thư viện này mình sẽ giới thiệu nó cho các bạn ở một bài gần nhất.

Chúc các bạn học tập tốt!

BÌNH LUẬN

Vui lòng nhập bình luận của bạn
Vui lòng nhập tên của bạn ở đây