CSS trước sau

Này bạn. Tình hình là đang làm việc ở nhà và có chút thời gian 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 lớp rởm 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 hiệu quả của nó mang lại đó chính là

p:after {
 content: " Tuan";
}

7 và

p:after {
 content: " Tuan";
}

0

Hiểu đơn giản thì before, more into before and after is more into after 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 khóa học HTML CSS cực chất mới ra mắt của mình tại đây. https. //evodev. com/khoa-hoc-html-css

# Cách sử dụng

Để sử dụng

p:after {
 content: " Tuan";
}

7 hay

p:after {
 content: " Tuan";
}

2 thì đơn giản các bạn chỉ cần sử dụng theo cú pháp phần tử. trước hoặc phần tử. sau đó. Như

p:after {
 content: " Tuan";
}

3 real time. And to before or after active thì bắt buộc phải có thuộc tính

p:after {
 content: " Tuan";
}

4 nha

Thường các bạn hay thấy

p:after {
 content: " Tuan";
}

5 người ta để trố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 không sao cả. Ví dụ một thẻ

p:after {
 content: " Tuan";
}

7 any that

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";
}

Nếu mình muốn thêm vào trước thì . 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 phải bôi đen đoạn chữ từ trước hay sau được.

p:after {
 content: " Tuan";
}

0
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ể biết khi nào các bạn sử dụng fontawesome, họ sử dụng before hay after để hiển thị biểu tượng với thuộc tính

p:after {
 content: " Tuan";
}

00 gì đó để hiển thị biểu tượng tương ứng mà họ đã định dạng trong mã của họ

Còn nếu để trống

p:after {
 content: " Tuan";
}

5 như thế này thì các bạn cũng có thể làm nhiều kiểu khác nhau như làm nền phủ toàn bộ layer nè, hiệu ứng nền chạy qua chạy lại rồi hoạt hình các kiểu, tạo các kiểu phức tạp…. nhiều lắm

Thông thường khi sử dụng before or after thì phần tử mà chúng ta đang làm nên sử dụng

p:after {
 content: " Tuan";
}

02 hoặc

p:after {
 content: " Tuan";
}

03. Sau đó trong

p:after {
 content: " Tuan";
}

7 hoặc

p:after {
 content: " Tuan";
}

2 bạn sử dụng

p:after {
 content: " Tuan";
}

03 và các thuộc tính

p:after {
 content: " Tuan";
}

07,

p:after {
 content: " Tuan";
}

08,

p:after {
 content: " Tuan";
}

09,

p:after {
 content: " Tuan";
}

00 để căn chỉnh vị trí tương tự với các thuộc tính CSS khác để tạo kiểu theo ý muốn của bạn

Nếu bạn không hiểu cách sử dụng vị trí trong CSS như thế nào thì đừng quên quay lại bài trước mình đã viết về tìm hiểu thuộc tính vị trí trong CSS rất rõ ràng chi tiết luôn đó. 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 để các bạn dễ hiểu và hình dung hơn. mù đọc chữ giờ chắc chưa não đâu

# Hiệu ứng nền

Giả sử bây giờ mình có HTML như thế này

p:after {
 content: " Tuan";
}

0
và CSS như thế này

p:after {
 content: " Tuan";
}

2
Giờ mình muốn khi rê chuột vào thì cái

p:after {
 content: " Tuan";
}

01 nó sẽ . Mình sẽ code như sau

p:after {
 content: " Tuan";
}

5
Lúc đầu mình cho

p:after {
 content: " Tuan";
}

7 có thuộc tính

p:after {
 content: " Tuan";
}

5 trống,

p:after {
 content: " Tuan";
}

03 để chạy theo phần tử cha(ở đây là thẻ

p:after {
 content: " Tuan";
}

06 chính nó

Kèm theo là

p:after {
 content: " Tuan";
}

09 có nghĩa là nó sẽ chiếm chiều cao 100% của phần tử mà chúng ta đang làm thẻ là

p:after {
 content: " Tuan";
}

06 và đặt độ rộng (

p:after {
 content: " Tuan";
}

21) là 0 để nó không có gì hết. Và đính kèm thêm

p:after {
 content: " Tuan";
}

22 để làm cho hiệu ứng mượt mà hơn khi

p:after {
 content: " Tuan";
}

23 vào

Sau đó mình dùng

p:after {
 content: " Tuan";
}

23 để khi chúng ta rê chuột vào thì mình cho độ rộng(

p:after {
 content: " Tuan";
}

25) để cho cái

p:after {
 content: " Tuan";
}

01 nó chạy ra từ bên trái qua phải. You can see this codepen demo

Xem Bút CSS. trước và. sau bởi EvonDev (@blackzero) trên CodePen

Tuy nhiên, bạn sẽ thấy khi rê chuột vào

p:after {
 content: " Tuan";
}

01, nó sẽ chạy ngược lên chữ luôn. Như vậy là sai rồi. Vì thế đừng quên sử dụng thuộc tính

p:after {
 content: " Tuan";
}

28 vào nhé. Ở trong Codepen các bạn check code CSS sẽ thấy mình có comment cái

p:after {
 content: " Tuan";
}

29 lại đó

Mình để số âm là vì muốn nó nằm dưới,

p:after {
 content: " Tuan";
}

28 hoạt động như các lớp chồng lên nhau Lớp nào có

p:after {
 content: " Tuan";
}

28 cao hơn sẽ nằm trên và ngược lại Lớp nào có

p:after {
 content: " Tuan";
}

28 thấp hơn sẽ nằm dưới

Mặc định giá trị của

p:after {
 content: " Tuan";
}

28 là auto và

p:after {
 content: " Tuan";
}

28 chỉ hoạt động khi đi kèm với thuộc tính position nhé. Cho nên mình đặt cho thẻ

p:after {
 content: " Tuan";
}

55 là -1 cho nó nằm dưới văn bản. Các bạn nhớ bỏ comment để nó show 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

p:after {
 content: " Tuan";
}

56 các bạn có thể xem tham khảo nà. Mình muốn khi rê chuột vào

p:after {
 content: " Tuan";
}

01 nó sẽ chạy từ bên trái qua phải(như lúc đầu) và sau khi luôn bỏ chuột ra thay vì co

p:after {
 content: " Tuan";
}

01 quay lại bên trái thì mình muốn nó chạy qua bên phải

Chỉ một chút thay đổi mã CSS với thuộc tính

p:after {
 content: " Tuan";
}

00 và

p:after {
 content: " Tuan";
}

08 như thế này

p:after {
 content: " Tuan";
}

3
Và ta đã đạt được kết quả như mong đợi

Xem Bút CSS. trước và. after#2 bởi EvonDev (@blackzero) trên CodePen

# Lưu ý. and

Nhiều bạn khi code sẽ thấy có người dùng

p:after {
 content: " Tuan";
}

7 hoặc

p:after {
 content: " Tuan";
}

32 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. or 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 đã hết hạn thì lại không hỗ trợ 2 dấu 2 dấu chấm

Cho nên nếu dự án bạn code không cần tận hưởng IE8 thì thoải mái dùng

p:after {
 content: " Tuan";
}

32 hay

p:after {
 content: " Tuan";
}

34 ok nhé. Còn làm việc với IE8 thì dùng

p:after {
 content: " Tuan";
}

7 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? . And way good best that is used

p:after {
 content: " Tuan";
}

7 or

p:after {
 content: " Tuan";
}

2 to doing it. Để 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ẽ viết mã HTML và CSS như thế này

p:after {
 content: " Tuan";
}

9

p:after {
 content: " Tuan";
}

0
Ta được kết quả như mong đợi

Xem Pen CSS before after #3 của EvonDev (@blackzero) trên CodePen

Việc tạo hình tam giác thì mình đã để link ở trên, còn ở đây mình đã đặt

p:after {
 content: " Tuan";
}

39 để nó nằm dưới cùng vì nó có độ cao là

p:after {
 content: " Tuan";
}

90 của

p:after {
 content: " Tuan";
}

91 và mình cho thêm 

p:after {
 content: " Tuan";
}

92 để nó cách ra so với bên trái 1 chút cho

# Lời kết

Bài viết đến đây là kết thúc. Hi vọng sẽ giúp các bạn hiểu hơn là đượ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à khi làm chúng ta sẽ phải gặp

Nếu có gì thắc mắc góp ý thì cứ bình luận bên dưới mình sẽ cố gắ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

Là gì. trước trong CSS?

Trước và sau bộ chọn giả là gì?

Tại sao CSS không hoạt động sau?

Điều gì tiếp theo sau CSS?