Tìm hiểu before và after trong CSS

Hiểu đơn giản thì before thì thêm vào trước và after là thêm vào sau thế thôi nhưng để hiểu sâu và làm được với nó thì cách tốt nhất đó là làm ví dụ thì mới mau hiểu được. Nào cùng chiến thôi.

Cách sử dụng

Để sử dụng :before hay :after thì đơn giản các bạn chỉ cần dùng theo cú pháp element:before hoặc element:after. Như .home:before{} chẳng hạn. Và để before hay after hoạt động thì bắt buộc phải có thuộc tính content nha.

Thường thường các bạn hay thấy content: "" người ta để rỗng thế này là vì người ta muốn làm một cái gì đó khác mà không có nội dung bên trong. Còn bạn muốn thêm vào content: "noidung" thì vẫn được không sao cả. Ví dụ một thẻ p nào đó

<p>toi ten la</p>

Mình muốn thêm tên của mình vào phía sau thẻ p này thì mình sẽ sử dụng :after

p:after {

content: " Tuan";

}

Còn nếu mình muốn thêm vào trước thì dùng :before

p:before {

content: "Xin chao ";

}

Ta được kết quả như hình. Và các bạn sẽ thấy là các bạn có thể bôi đen đoạn chữ “toi ten la” chứ không có bôi đen đoạn chữ từ before hay after được.

Hoặc các bạn có thể thấy rõ khi các bạn sử dụng fontawesome, họ xài before hay after để hiển thị icon với thuộc tính content: "\ec06" gì đó để nó hiển thị icon tương ứng mà họ đã định dạng trong code của họ.

Còn nếu mà để trống content: "" như này thì các bạn cũng có thể làm nhiều kiểu style khác như làm background phủ toàn bộ layer nè, hiệu ứng background chạy qua chạy lại rồi animation các kiểu, tạo những kiểu phức tạp…. nhiều lắm.

Thường thường khi sử dụng before hoặc after thì phần tử mà chúng ta đang làm nên sử dụng position: relative hoặc position: absolute. Sau đó trong :before hay :after các bạn dùng position: absolute và các thuộc tính top, right, bottom, left để căn chỉnh vị trí cùng với các thuộc tính CSS khác để style theo ý muốn của bạn.

Mr4 Java Developer

Đi lên từ nền tảng vững chắc!

Tìm hiểu before và after trong CSS

Cách sử dụng

Hãy bình luận đầu tiên

Để lại một phản hồi Hủy