Hey ya. Tình hình là đang làm việc ở nhà và có chút thời gian rãnh 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à :before
và
p:after { content: " Tuan"; }0
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.
Đừng quên tham khảo khoá học HTML CSS cực chất mới ra mắt của mình tại đây: //evondev.com/khoa-hoc-html-css
# Cách sử dụng
Để sử dụng :before
hay
p:after { content: " Tuan"; }2 thì đơn giản các bạn chỉ cần dùng theo cú pháp element:before hoặc element:after. Như
p:after { content: " Tuan"; }3 chẳng hạn. Và để before hay after hoạt động thì bắt buộc phải có thuộc tính
p:after { content: " Tuan"; }4 nha.element:before hoặc element:after. Như
p:after { content: " Tuan"; }3 chẳng hạn. Và để before hay after hoạt động thì bắt buộc phải có thuộc tính
p:after { content: " Tuan"; }4 nha.
Thường thường các bạn hay thấy
p:after { content: " Tuan"; }5 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
p:after { content: " Tuan"; }6 thì vẫn được không sao cả. Ví dụ một thẻ
p:after { content: " Tuan"; }7 nào đó
toi ten la
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"; }2
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
p:before { content: "Xin chao "; }0 gì đó để nó hiển thị icon tương ứng mà họ đã định dạng trong code của họ.fontawesome, họ xài before hay after để hiển thị icon với thuộc tính
p:before { content: "Xin chao "; }0 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
p:after { content: " Tuan"; }5 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
p:before { content: "Xin chao "; }2 hoặc
p:before { content: "Xin chao "; }3. Sau đó trong
:before
hay p:after { content: " Tuan"; }2 các bạn dùng
p:before { content: "Xin chao "; }3 và các thuộc tính
p:before { content: "Xin chao "; }7,
p:before { content: "Xin chao "; }8,
p:before { content: "Xin chao "; }9,
0 để 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.Animation background
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 background
Giả sử bây giờ mình có HTML như thế này
Animation background
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
1 nó sẽ chạy từ trái qua phải rồi sau khi đưa chuột ra thìAnimation background
1 nó thu về lại. Mình sẽ code như sauAnimation background
h2:hover:before { width: 100%; }
Lúc đầu mình cho :before
có thuộc tính
p:after { content: " Tuan"; }5 rỗng,
p:before { content: "Xin chao "; }3 để chạy theo phần tử cha[ở đây là thẻ
6 chính nó] vàAnimation background
7,Animation background
8 thì nó sẽ nằm góc bên trái trên cùngAnimation background
Kèm theo là
9 nghĩa là nó sẽ chiếm chiều cao 100% của phần tử mà chúng ta đang làm là thẻAnimation background
6 và set độ rộng[Animation background
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; }1] là 0 để nó chưa có gì hết. Và kèm thêm
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; }2 để làm hiệu ứng nó mượt hơn khi
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; }3 vào.
Sau đó mình dùng
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; }3 để khi chúng ta rê chuột vào thì mình cho độ rộng[
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; }5] để cho cái
1 nó chạy ra từ trái qua phải. Bạn có thể xem demo Codepen nàyAnimation background
See the Pen CSS :before and :after by EvonDev [@blackzero] on CodePen.
Tuy nhiên các bạn sẽ thấy khi rê chuột vào
1 nó chạy đè lên chữ luôn. Như vậy là sai rồi. Vì thế đừng quên dùng thuộc tínhAnimation background
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; }8 vào nhé. Ở trong Codepen các bạn check code CSS sẽ thấy mình có comment cái
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; }9 lại đó.
Mình để số âm là vì muốn nó nằm dưới,
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; }8 hoạt động như các lớp đè lên nhau lớp nào có
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; }8 cao hơn sẽ nằm lên trên và ngược lại lớp nào có
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; }8 thấp hơn sẽ nằm ở dưới.
Mặc định giá trị của
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; }8 là auto và
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; }8 chỉ hoạt động khi đi kèm với thuộc tính position nhé. Cho nên mình set cho thẻ
h2:hover:before { width: 100%; }5 là -1 cho nó nằm dưới text. Các bạn nhớ bỏ comment để nó hiển thị ra kết quả như mong đợi nè.chỉ hoạt động khi đi kèm với thuộc tính position nhé. Cho nên mình set cho thẻ
h2:hover:before { width: 100%; }5 là -1 cho nó nằm dưới text. Các bạn nhớ bỏ comment để nó hiển thị ra kết quả như mong đợi nè.
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
h2:hover:before { width: 100%; }6 các bạn có thể xem tham khảo nà. Mình muốn khi rê chuột vào
1 nó sẽ chạy từ trái qua phải[như lúc đầu] và sau khi bỏ chuột ra thay vì coAnimation background
1 lại bên trái thì mình muốn nó chạy qua bên phải luôn.Animation background
Chỉ một chút thay đổi code CSS với thuộc tính
0 vàAnimation background
p:before { content: "Xin chao "; }8 như thế này
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
See the Pen CSS :before and :after#2 by EvonDev [@blackzero] on CodePen.
Nhiều bạn khi code sẽ thấy có người dùng :before
hoặc
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*/ }2 thì mình note phát là hầu hết các trình duyệt đều hỗ trợ 2 dấu 2 chấm :: hay 1 dấu 2 chấm : cho cú pháp của CSS3 tuy nhiên trên một số trình duyệt cũ như IE8 chẳng hạn thì lại không hỗ trợ 2 dấu 2 chấm ::.
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
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*/ }2 hay
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*/ }4 ok nhé. Còn làm việc với IE8 thì dùng
:before
hay p:after { content: " Tuan"; }2 cho an toàn.
# Tạo ribbon hình tam giác
Cá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 :before
hoặc
p:after { content: " Tuan"; }2 để làm nó. Để tạo hình tam giác bằng CSS hay hình gì khác thì các bạn có thể tham khảo code tại đây.
Và chúng ta sẽ code HTML và CSS như thế này
.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; }
.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
See the Pen CSS before after #3 by EvonDev [@blackzero] on CodePen.
Việc tạo hình tam giác thì mình đã để link ở trên, còn ở đây mình có set
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*/ }9 để nó nằm dưới cùng vì nó có độ cao là
0 của
1 và mình cho thêm
2 để nó cách ra so với bên trái 1 chút cho đẹp và màu
1 nó sẽ trùng với màu nền của thẻ
4 mà chúng ta đang làm cho đồng bộ.
# Lời kết
Bà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..