Hey ya. Tình trạng là new đi du ngoạn Đà Nẵng zìa hôm cơ nên bây giờ tranh thủ viết bài share tiếp kỹ năng và kiến thức cho anh em. Và công ty đề bây giờ đó là một trong những pseudo class mà nhiều bạn học và có tác dụng vẫn chưa hiểu rõ tương tự như áp dụng không còn sự hiệu quả của nó mang lạiđó chủ yếu là:beforevà:after.

Bạn đang xem: "::after"

Hiểu đơn giản thìbeforethì cấp dưỡng trước vàafterlà sản xuất sau nỗ lực thôi mà lại để phát âm sâu và làm cho được với nó thì cách cực tốt đó là làm cho ví dụ thì mới có thể mau hiểu được. Nào thuộc chiến thôi. 3 điều bạn có thể không biết về biến đổi trong CSS 9 CSS animation mới "mãn nhãn" cho những project

Đừng quên xem thêm khoá học tập HTML CSS cực chất mới ra mắt của bản thân tại đây:https://evondev.com/khoa-hoc-html-css

# giải pháp sử dụng

Để sử dụng:beforehay:afterthì đơn giản các bạn chỉ bắt buộc dùng theo cú pháp element:before hoặc element:after. Như.home:beforechẳng hạn. Với để before xuất xắc after chuyển động thìbắt đề xuất cóthuộc tínhcontentnha.

Thường thường chúng ta hay thấycontent: ""người ta để rỗng vậy này là vì người ta ao ước làm một cái gì đó khác mà không tồn tại nội dung mặt trong. Còn bạn muốn thêm vàocontent: "noidung"thì vẫn được không vấn đề gì cả. Ví dụ như một thẻpnào đótoi ten la

Mình ước ao thêm tên của bản thân vào vùng sau thẻ p này thì mình đang sử dụng:afterp:after content: " Tuan";

Còn nếu bạn muốn thêm vào trước thì dùng:beforep:before content: "Xin chao ";

Ta được công dụng như hình


*

Hoặc các chúng ta có thể thấy rõ khi các bạn sử dụngfontawesome, bọn họ xài before xuất xắc after để hiển thị icon với trực thuộc tínhcontent: "ec06"gì đó để nó hiển thị icon tương ứng mà người ta đã format trong code của họ.


Còn nếu như để trốngcontent: ""như này thì các chúng ta cũng có thể làm nhiều phong cách style khác như làm background phủ tổng thể layer nè, cảm giác background chạy qua chạy lại rồi animation những kiểu, tạo số đông kiểu phức tạp. Nhiều lắm.

Thường thường xuyên khi áp dụng before hoặc after thì bộ phận mà họ đang tạo sự sử dụngposition: relativehoặcposition: absolute. Tiếp đến trong:beforehay:aftercác chúng ta dùngposition: absolutevà các thuộc tínhtop,right,bottom,leftđể căn chỉnh vị trí cùng với các thuộc tính CSS khác để style theo nguyện vọng của bạn.

Nếu bạn không hiểu biết nhiều cách cần sử dụng position trong CSS ra sao thì đừng quên quay lại bài xích trước mình bao gồm viết về tìm hiểu thuộc tính position vào CSS rất rõ ràng 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ụ như kèm theo giải thích cho chúng ta dễ đọc và tưởng tượng hơn. Chớ đọc chữ nãy giờ chắc hẳn chưa thông não đâu.

# cảm giác background

Giả sử hiện thời mình có HTML như vậy này

Animation background

và CSS như nàyh2 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ờ bạn thích khi rê chuột vào thì cáibackground-colornó đã chạy tự trái qua yêu cầu rồi sau khi đưa loài chuột ra thìbackground-colornó bỏ túi lại. Mình đã code như sauh2:hover:before width: 100%;

Lúc đầu mình cho:beforecó nằm trong tínhcontent: ""rỗng,position: absoluteđể chạy theo phần tử cha(ở đấy là thẻh2chính nó) vàtop: 0,left: 0thì nó sẽ nằm góc bên trái trên cùng

Kèm theo làheight: 100%nghĩa là nó sẽ chiếm độ cao 100% của bộ phận mà bọn họ đang có tác dụng là thẻh2và phối độ rộng(width) là 0 để nó chưa có gì hết. Và kèm thêmtransitionđể làm cho hiệu ứng nó mượt hơn khi:hovervào.


Sau đó mình dùng:hoverđể khi họ rê con chuột vào thì mình đến độ rộng(width: 100%) để cho cáibackground-colornó chạy ra từ trái qua phải. Chúng ta có thể xem chạy thử Codepen này

Tuy nhiên các các bạn sẽ thấy khi rê chuột vàobackground-colornó chạy đè lên chữ luôn. Vậy nên là sai rồi. Chính vì như thế đừng quên cần sử dụng thuộc tínhz-indexvào nhé. Ở trong Codepen các bạn check code CSS đã thấy mình có comment cáiz-index: -1lại đó.

Xem thêm: Bệnh Đau Nửa Đầu Vai Gáy : Nguyên Nhân, Triệu Chứng Và Cách Điều Trị

Mình để số âm là vì ước ao nó ở dưới,z-indexhoạt rượu cồn như các lớp đè lên nhau lớp như thế nào cóz-indexcao hơn đang nằm lên phía trên và ngược lại lớp nào cóz-indexthấp rộng sẽ nằm tại vị trí dưới.

Mặc định cực hiếm củaz-indexlà tự động vàz-indexchỉ hoạt động khi đi kèm với trực thuộc tính positionnhé. Vì thế mình set mang đến thẻh2:beforelà -1 mang đến nó nằm bên dưới text. Chúng ta nhớ bỏ phản hồi để nó hiển thị ra kết quả như mong mỏi đợi nè.

Giờ mình thích cải thiện hiệu ứng rất dị hơn một ít với các thuộc tínhleft rightcác bạn có thể xem xem thêm nà. Bạn muốn khi rê chuột vàobackground-colornó vẫn chạy từ trái qua phải(như cơ hội đầu) và sau khoản thời gian bỏ chuột ra thay bởi cobackground-colorlại phía bên trái thì bạn muốn nó chạy qua bên đề xuất luôn.

Chỉ một chút đổi khác code CSS với thuộc tínhleftvàrightnhư nỗ lực nàyh2: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 hiệu quả như ý muốn đợi

# xem xét : và ::

Nhiều các bạn khi code vẫn thấy có fan dùng:beforehoặc::beforethì mình chú ý phát là phần đông các trình chuẩn y đều cung ứng 2 lốt 2 chấm :: hay là 1 dấu 2 chấm : cho cú pháp của CSS3 tuy vậy trên một số trong những trình cẩn thận cũ như IE8 chẳng hạn thì lại không hỗ trợ 2 dấu 2 chấm ::.

Cho đề nghị nếu dự án công trình bạn code không đề xuất tới tận IE8 thì thoải mái dùng::beforehay::afterok nhé. Còn giúp việc với IE8 thì dùng:beforehay:aftercho an toàn.


# tạo nên ribbon hình tam giác


*

Các chúng ta nhìn quen không? chắc hẳn khi làm sẽ gặp nhiều trường hợp như vậy này rồi. Và cách rất tốt đó là dùng:beforehoặc:afterđể làm nó. Để tạo ra hình tam giác bằng CSS tốt hình gì không giống thì các bạn cũng có thể tham khảo codetại đây.

Và bọn họ 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;

Ta được kết quả như hy vọng đợi

Việc sinh sản hình tam giác thì tôi đã để link ở trên, còn tại đây mình tất cả setbottom: -10pxđể nó nằm dưới cùng vày nó có độ cao là10pxcủabordervà mình mang đến thêmleft: 50pxđể nó phương pháp ra so với bên trái 1 chút cho đẹp và màubordernó sẽ trùng với màu sắc nền của thẻdivmà họ đang tạo nên đồ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 chúng ta hiểu hơn được song chút. Vị mấy mẫu này phải làm nhiều thì mới biết nhiều, áp dụng được không ít chứ cấp thiết chỉ không còn được vày nó còn không ít cái bắt đầu mà trong lúc làm bọn họ sẽ gặp gỡ phải.

Nếu tất cả gì vướng mắc góp ý thì cứ bình luận bên dưới mình sẽ cầm cố giải đáp với kiến thức và kỹ năng chuyên môn của mình nà. Chúc các bạn một ngày giỏi lành.

Bài viết gốc được đăng cài tại evondev.com

Có thể chúng ta quan tâm:

Weekly UI lí giải code hình ảnh trang sản phẩm đơn giảnCustom checkbox là gì ? Và phương pháp tạo custom checkbox đẹp dễ dàngCSS Box model và box-sizing: border-box là gì vậy?

Video liên quan


Tải thêm tài liệu liên quan đến nội dung bài viết Before after CSS là gì

Hỏi ĐápLà gì