After Và Before Trong CSS

Có thể bạn quan tâm

Thiết kế website chuyên nghiệp trọn gói Đáp ứng mọi yêu cầu Khách hàng Liên hệ: 84-967-747-055 Trang chủ » css » After và Before trong CSS

After và Before trong CSS

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.

1. 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:

1 2 3 4 5 6

selector:after{ } selector:before{ }

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ụ: XEM DEMO

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> .title:after{ content : " freetuts.net" } </style> </head> <body> <div class="title">Chào mừng bạn đến với</div> </body> </html>

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 freetuts.net". Lý do là trong thuộc tính after mình có bổ sung một thuộc tính CSS content:" freetuts.net" 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ụ: XEM DEMO

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> .title:before{ content : "freetuts.net " } </style> </head> <body> <div class="title">Chào mừng bạn</div> </body> </html>

Kết quả nó bổ sung chữ "freetust.net" vào đằng trước nội dung của thẻ HTML nên xuất hiện lên màn hình dòng "freetuts.net chào mừng bạn".

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

Lưu ý 1: 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. Lưu ý 2: 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. Ví dụ: XEM DEMO

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> .title:before{ content : "After và Before "; cursor: text; border: solid 1px; padding: 5px; background: red } </style> </head> <body> <div class="title">có thể sử dụng CSS</div> </body> </html>

Nếu bạn để ý kỹ thì theo mặc định after và before sẽ có mặc định là display:inline-block.

3. Lời kết

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ốt.

Nhãn: css

Không có nhận xét nào:

Đăng nhận xét

Bài đăng phổ biến

TẠO TRANG VÀ MENU TRANG CHO BLOGSPOT C húng ta đều biết, để có một trang blog gọn gàng, dễ sử dụng và gây được ấn tượng với người ghé thăm. Cần phải có một số trang, mục như ...
HƯỚNG DẪN TẠO VÀ QUẢN LÝ BLOGSPOT Blog là gì: L à trang chia sẻ thông tin cá nhân trực tuyến. Blogger là gì : ( a person who keeps a blog ). Nôm na là để chỉ những ngườ...
Lấy dữ liệu Blogspot khác và Bảo vệ dữ liệu blogspot bản thân. Các bước Lấy data của blogspot khác hay gọi lịch sự là lấy data, mà gọi không lịch sự là đi ăn cắp. Mình cũng từng bị một tên ăn chộm dự li...
Chống copy hay quét khối trên blogspot Hiện nay công nghệ thông tin phát triển thì vấn đề bảo mật an toàn trên internet càng được chú trọng. Đối với những người viết blog hay web...
Giới hạn nên biết khi thiết kế blogspot Blogspot là một nền tảng miễn phí, và tất nhiên như bao nền tảng blog khác nó đều có một điểm tới hạn về mô tả, số lượng bài viết, dung lượ...
Cách chia header làm 2 phần, một bên logo và 1 bên quảng cáo Kết thúc bài viết trước, chúng ta đã cùng nhau thực hiện cách chèn tiêu đề/logo cho blog trong header. Ở bài này, chúng ta sẽ cùng nhau thực...
CÔNG CỤ TẠO BACKLINK – PHẦN MỀM BẮN BACKLINK HIỆU QUẢ ( BACKLINK TOOL ) Nhiều bạn làm SEO coi việc sử dụng phần mềm bắn backlink là một hành động spam backlink , một kỹ thuật SEO mũ đen giả trá và hắc ám. Riêng...
Cú pháp CSS - các cách viết CSS Ở bài trước chúng ta đã được học khái niệm CSS là gì rồi nhỉ? Vậy thì trong bài này để cho nóng thì chúng ta sẽ tìm hiểu đến cú pháp viết...
SUBMIT BACKLINK, PING BACKLINK VÀ AUTO BACKLINK ONLINE Sau khi đặt backlink chúng ta thường muốn backlink được Google index sớm để nhanh chóng cải thiện thứ hạng từ khóa trên SERPs. Việc lôi ké...
Bài viết mới nhất (recent post) có ảnh thumbnail cho blogspot Trước đây mình có post một bài viết đề cập đến việc hiển thị bài viết và Comment mới nhấ t cho blogger, tuy nhiên ở thủ thuật đó thì bài v...