Đọc tiều đề chắc hẳn mọi người đã và đang đoán được từ bây giờ chúng ta sẽ nói về chủ đề là ::after với ::before trong CSS.

Bạn đang xem: Css :: before và :: after trong css

::after cùng ::before đã khôn xiết là quen thuộc với chúng ta trong quá trình học tập và làm cho việc, đặc biệt là các Front kết thúc Developer. Lúc này mình xin chia sẻ sâu hơn một chút những gì mình đã tò mò được về nhị pseudo-element này, rất ước ao được mọi tín đồ ủng hộ .

*

::after với ::before là gì?

::after và ::before được hotline là những pseudo-elements tốt còn được phát âm là các thành phần giả và chúng được áp dụng trong CSS để tạo thành các bộ phận giả trong element.

::before sẽ khởi tạo ra 1 phần tử giả luôn luôn là element con thứ nhất của element được thực hiện ::before.

Tương tự đối với ::after nhưng thành phần giả bây giờ luôn luôn luôn là element con cuối cùng.

*

Cú pháp

/* CSS3 syntax */::after /*or ::before*//* CSS2 syntax */:after /*or :before*/Việc trong CSS3 họ sử dụng :: thay vày : như vào CSS2 với mục tiêu để khác nhau pseudo-element cùng với pseudo-class.

Một số lưu ý khi sử dụng

Thứ nhất

Tất cả các trình duyệt đều hỗ trợ cú pháp : của CSS nhưng so với cú pháp :: vào CSS3, bọn họ cần để ý IE8 và Opera 4-6 chỉ hỗ trợ :. Vậy nên bọn họ nên sử dụng : thay vị :: vừa ngăn nắp lại đảm bảo không chạm mặt những lỗi không ý muốn muốn. Bản thân xin phép áp dụng : tự giờ đến cuối bài viết.

Thứ hai

Bất kỳ lúc nào sử dụng :after hoặc :before họ đều đề nghị khai báo content: ""; cho phần tử giả đó, còn nếu như không có content thì thành phần giả sẽ không được render ra bên trên DOM cũng tương tự hiển thị lên trên website. Cùng content có thể chứa những giá trị:

Một chuỗi: content: "a string";. Đối với những ký tự đặc trưng thì phải mã code để biệt, ví như unicode.Một ảnh: content: url("/path/image.jpg");. Ảnh được chèn vào sẽ sở hữu size giữ nguyên theo ảnh gốc và cần yếu resize được.Rỗng: content: ""; rất bổ ích khi clearfix cùng chèn hình ảnh dưới dạng background-imageKhi mong muốn xóa thành phần giả khỏi trang, bạn có thể sử dụng: content: none;Thứ ba

Phần tử mang được sinh sản ra sẽ có display: inline.

Thứ tư

Nguyên nhân là vì img không vận dụng được :after và :before giỏi nó rộng ra là những replaced element sẽ không áp dụng được :after cùng :before.

Vậy replaced element là gì? Chúng hầu hết element mà văn bản của chúng nằm ngoài phạm vi của CSS formatting model. Tốt hiểu đơn giản và dễ dàng hơn đó là số đông element nhưng CSS quan trọng style được. Gồm những thẻ như: audio, video, canvas, svg, ... Chúng ta có thể đọc thêm tại đây

Vậy vì sao nội dung của những replaced element lại nằm quanh đó phạm vi của CSS formatting model. Bởi vì nội dung của chúng được rước từ bên phía ngoài tài liệu .html của bạn.

Xem thêm: Cách Dùng Were And Was - Cách Dùng Was Were Trong Tiếng Anh Từ A

VD: hình hình ảnh bạn đưa vào website bằng thẻ img sẽ được lấy link hoàn hảo nhất hoặc tương đối vào phải nội dung của chính nó không nằm trong document của bạn.


Nhưng ngoài các replaced element còn những element khác cũng không thực hiện được :after xuất xắc :before. Đó là 1 trong những vài type của thẻ input, ví dụ là các type mình đã test bên dưới đây:


Trong một vài lần code, mình vô tình vận dụng :after và :before mang lại input type text với thật ngạc nhiên nó không tồn tại trên trang web của mình.

Mình có tìm hiểu vì sao mà những input này không nhận :after với :before với tìm thấy câu vấn đáp khá thuyết phục trên stack overflow.

Cụ thể, câu vấn đáp là :after và :before chỉ được áp dụng cho các container element giỏi các phần tử giả sẽ được render vào bên trong element đó. Và hiển nhiên input cần yếu chứa những element khác bắt buộc nó sẽ không còn sử dụng được.

Tuy nhiên điều này lại không đúng đối với các input type sót lại (VD: date, week,...) vì thế vẫn không thể xác định được câu trả lời ở trên có đúng hay không? ví như mọi người có chủ ý khác đừng ngại ngần comment dưới để chúng ta cùng thảo luận.

Ứng dụng hoàn hảo và tuyệt vời nhất của :after với :before

:after cùng :before có không ít ứng dụng tuyệt đối khi áp dụng trong trang web.

1. Clearfix

Chúng ta rất có thể sử dụng :after để tạo ra một phần tử mang làm trọng trách clear float núm cho việc tạo nên một div.


Ngoài ra còn nhiều ứng dụng khác của :after với :before nhưng mà mình chưa tính ra chỗ nào nhưng chúng thực sự đem đến hiệu quả.

Lời kết

Trên đây tôi đã đưa ra đầy đủ hiểu biết của mình về hai pseudo-element :after cùng :before.

Nếu có chủ ý góp ý nào, mọi người hãy để lại comment dưới nhé. Cảm ơn mọi tín đồ đã đọc bài xích viết.

References

https://css-tricks.com/almanac/selectors/a/after-and-before/

https://developer.mozilla.org/en-US/docs/Web/CSS/::before

https://developer.mozilla.org/en-US/docs/Web/CSS/::after

https://stackoverflow.com/questions/2587669/can-i-use-a-before-or-after-pseudo-element-on-an-input-field