Hướng dẫn css after before
Bài viết được sự cho phép của tác giả Trần Anh Tuấn Hey ya. Tình hình là mới đi du lịch Đà Nẵng zìa hôm kia nên hôm nay tranh thủ viết bài chia sẻ tiếp kiến thức cho anh em. Và chủ đề hôm nay đó là một trong những pseudo class mà nhiều bạn học và làm vẫn chưa hiểu rõ cũng như áp dụng hết sự hiệu quả của nó mang lại đó chính là 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 Thường thường các bạn hay
thấy <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 p:after { content: " Tuan"; } Còn nếu mình muốn thêm vào trước thì dùng p:before { content: "Xin chao "; } Ta được kết quả như hình 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 Còn nếu mà để trống 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 Nếu bạn không hiểu cách dùng position trong CSS như thế nào thì đừng quên quay lại bài trước mình có viết về tìm hiểu thuộc tính position trong CSS rất rõ ràng chi tiết luôn ấy. Các bạn có thể xem tại đây nha. Giờ mình sẽ làm vài ví dụ kèm theo giải thích cho các bạn dễ hiểu và hình dung hơn. Chớ đọc chữ nãy giờ chắc chưa thông não đâu. # Hiệu ứng backgroundGiả sử bây giờ mình có HTML như thế này <h2>Animation background</h2> và CSS như này h2 { display: block; margin: 50px; padding: 10px; color: black; font-weight: bold; position: relative; } h2:before { content: ""; position: absolute; top: 0; left: 0; width: 0; height: 100%; background-color: #e74c3c; transition: .25s; } Giờ mình muốn khi rê
chuột vào thì cái h2:hover:before { width: 100%; } Lúc đầu mình cho Kèm theo là Sau đó mình dùng Tuy nhiên các bạn sẽ thấy khi rê chuột vào Mình để số âm là vì muốn nó nằm dưới, Mặc định giá trị của Giờ mình muốn cải thiện hiệu ứng độc đáo hơn một chút với các thuộc tính Chỉ
một chút thay đổi code CSS với thuộc tính h2:before { content: ""; position: absolute; top: 0; left: auto; /*change here*/ right: 0;/*change here*/ width: 0; height: 100%; background-color: #e74c3c; transition: .25s; z-index: -1; } h2:hover:before { width: 100%; left: 0;/*change here*/ right: auto;/*change here*/ } Và ta được kết quả như mong đợi Nhiều bạn khi code sẽ thấy có người dùng Cho nên nếu dự án bạn code không cần tới tận IE8 thì thoải
mái dùng # Tạo ribbon hình tam giácCác bạn nhìn quen không? Chắc hẳn khi làm sẽ gặp nhiều trường hợp như thế này rồi. Và cách tốt nhất đó là dùng Và chúng ta sẽ code HTML và CSS như thế này <div class="quote"></div> .quote { margin: 10px; width: 300px; height: 200px; background-color: #eee; border-radius: 30px; position: relative; } .quote:before { content: ""; position: absolute; bottom: -10px; left: 50px; border-top: 10px solid #eee; border-right: 10px solid transparent; border-left: 10px solid transparent; } Ta được kết quả như mong đợi Việc tạo hình tam giác thì mình đã để link ở trên, còn ở đây mình có set # Lời kếtBài viết đến đây là kết thúc. Hi vọng sẽ giúp được cho các bạn hiểu hơn được đôi chút. Vì mấy cái này cần làm nhiều thì mới biết nhiều, áp dụng được nhiều chứ không thể chỉ hết được vì nó còn rất nhiều cái mới mà trong khi làm chúng ta sẽ gặp phải. Nếu có gì thắc mắc góp ý thì cứ bình luận bên dưới mình sẽ ráng giải đáp với kiến thức chuyên môn của mình nà. Chúc các bạn một ngày tốt lành. Bài viết gốc được đăng tải tại evondev.com Có thể bạn quan tâm:
Xem thêm các việc làm lập trình CSS hấp dẫn tại TopDev |