::sau css

Question

Phần tử giả CSS

p {
  position: relative;
  font-size: 3rem;
  margin: 4rem;
}
p::before {
  content: open-quote;
  position: absolute;
  left: -3.5rem;
  top: -2rem;
  font-size: 8rem;
  color: rgba(0, 0, 0, 0.5)
}

4 và

p {
  position: relative;
  font-size: 3rem;
  margin: 4rem;
}
p::before {
  content: open-quote;
  position: absolute;
  left: -3.5rem;
  top: -2rem;
  font-size: 8rem;
  color: rgba(0, 0, 0, 0.5)
}

5 chỉ định vị trí của nội dung trước và sau nội dung cây tài liệu của phần tử. Thuộc tính

p {
  position: relative;
  font-size: 3rem;
  margin: 4rem;
}
p::before {
  content: open-quote;
  position: absolute;
  left: -3.5rem;
  top: -2rem;
  font-size: 8rem;
  color: rgba(0, 0, 0, 0.5)
}

6, kết hợp với các phần tử giả này, chỉ định nội dung được chèn. Đối với những người dùng cần tùy chỉnh hoặc tắt thông tin kiểu để xem nội dung theo nhu cầu của họ, các công nghệ hỗ trợ có thể không truy cập được thông tin được chèn bằng CSS. Do đó, không thể sử dụng các thuộc tính này để chèn nội dung không trang trí

Thuộc tính

p {
  position: relative;
  font-size: 3rem;
  margin: 4rem;
}
p::before {
  content: open-quote;
  position: absolute;
  left: -3.5rem;
  top: -2rem;
  font-size: 8rem;
  color: rgba(0, 0, 0, 0.5)
}

6 trong CSS xác định nội dung của một phần tử. Bạn có thể đã nghe nói rằng thuộc tính này chỉ áp dụng cho các phần tử giả

p {
  position: relative;
  font-size: 3rem;
  margin: 4rem;
}
p::before {
  content: open-quote;
  position: absolute;
  left: -3.5rem;
  top: -2rem;
  font-size: 8rem;
  color: rgba(0, 0, 0, 0.5)
}

8 và

p {
  position: relative;
  font-size: 3rem;
  margin: 4rem;
}
p::before {
  content: open-quote;
  position: absolute;
  left: -3.5rem;
  top: -2rem;
  font-size: 8rem;
  color: rgba(0, 0, 0, 0.5)
}

0. Trong bài viết này, chúng ta sẽ khám phá các trường hợp sử dụng khác nhau cho thuộc tính

p {
  position: relative;
  font-size: 3rem;
  margin: 4rem;
}
p::before {
  content: open-quote;
  position: absolute;
  left: -3.5rem;
  top: -2rem;
  font-size: 8rem;
  color: rgba(0, 0, 0, 0.5)
}

6, bao gồm cả bên ngoài các phần tử giả

Nội dung chính Show

Điều kiện tiên quyết
Giá trị được chấp nhận
báo giá cơ bản
báo giá nâng cao
Thuộc tính
Hình ảnh
Bên ngoài các yếu tố giả
Phần kết luận
Cảm ơn vì đã đọc
Có trước hay không. Trước CSS?
Là gì. trước và. sau dùng để làm gì?
Đâu là sự khác biệt giữa aftervà. sau trong CSS?
Là gì. chữ cái đầu tiên trong CSS?

Điều kiện tiên quyết

Vì phần lớn các trường hợp sử dụng cho thuộc tính

p {
  position: relative;
  font-size: 3rem;
  margin: 4rem;
}
p::before {
  content: open-quote;
  position: absolute;
  left: -3.5rem;
  top: -2rem;
  font-size: 8rem;
  color: rgba(0, 0, 0, 0.5)
}

6 liên quan đến các phần tử giả, nên tôi khuyên bạn nên làm quen với cách thức hoạt động của các phần tử giả

p {
  position: relative;
  font-size: 3rem;
  margin: 4rem;
}
p::before {
  content: open-quote;
  position: absolute;
  left: -3.5rem;
  top: -2rem;
  font-size: 8rem;
  color: rgba(0, 0, 0, 0.5)
}

8 và

p {
  position: relative;
  font-size: 3rem;
  margin: 4rem;
}
p::before {
  content: open-quote;
  position: absolute;
  left: -3.5rem;
  top: -2rem;
  font-size: 8rem;
  color: rgba(0, 0, 0, 0.5)
}

0. Đây là một bài viết tuyệt vời để giúp bạn tăng tốc

Phần tử giả CSS - Giải thích về bộ chọn trước và sau

Giá trị được chấp nhận

Trước tiên, chúng ta hãy xem tất cả các giá trị được chấp nhận của thuộc tính

p {
  position: relative;
  font-size: 3rem;
  margin: 4rem;
}
p::before {
  content: open-quote;
  position: absolute;
  left: -3.5rem;
  top: -2rem;
  font-size: 8rem;
  color: rgba(0, 0, 0, 0.5)
}

6

p {
  position: relative;
  font-size: 3rem;
  margin: 4rem;
}
p::before {
  content: open-quote;
  position: absolute;
  left: -3.5rem;
  top: -2rem;
  font-size: 8rem;
  color: rgba(0, 0, 0, 0.5)
}

6. Đây là giá trị mặc định. Tính toán thành

p {
  position: relative;
  font-size: 3rem;
  margin: 4rem;
}
p::before {
  content: open-quote;
  position: absolute;
  left: -3.5rem;
  top: -2rem;
  font-size: 8rem;
  color: rgba(0, 0, 0, 0.5)
}

7 khi được sử dụng với các phần tử giả

p {
  position: relative;
  font-size: 3rem;
  margin: 4rem;
}
p::before {
  content: open-quote;
  position: absolute;
  left: -3.5rem;
  top: -2rem;
  font-size: 8rem;
  color: rgba(0, 0, 0, 0.5)
}

7. Phần tử giả sẽ không được tạo

p {
  position: relative;
  font-size: 3rem;
  margin: 4rem;
}
p::before {
  content: open-quote;
  position: absolute;
  left: -3.5rem;
  top: -2rem;
  font-size: 8rem;
  color: rgba(0, 0, 0, 0.5)
}

9. Đặt nội dung thành chuỗi được chỉ định. Chuỗi này có thể chứa các chuỗi thoát Unicode. Ví dụ, biểu tượng bản quyền.

q {
  quotes: '“' '”' '‘' '’' '“' '”';
}

0

q {
  quotes: '“' '”' '‘' '’' '“' '”';
}

1. Đặt nội dung thành hình ảnh hoặc độ dốc bằng cách sử dụng

q {
  quotes: '“' '”' '‘' '’' '“' '”';
}

2 hoặc

q {
  quotes: '“' '”' '‘' '’' '“' '”';
}

3

q {
  quotes: '“' '”' '‘' '’' '“' '”';
}

4.

q {
  quotes: '“' '”' '‘' '’' '“' '”';
}

5. Đặt nội dung thành ký tự trích dẫn thích hợp được tham chiếu từ thuộc tính

q {
  quotes: '“' '”' '‘' '’' '“' '”';
}

6

q {
  quotes: '“' '”' '‘' '’' '“' '”';
}

7.

q {
  quotes: '“' '”' '‘' '’' '“' '”';
}

8. Xóa một trích dẫn khỏi phần tử đã chọn, nhưng vẫn tăng hoặc giảm mức lồng nhau được tham chiếu từ thuộc tính

q {
  quotes: '“' '”' '‘' '’' '“' '”';
}

6

p {
  position: relative;
  font-size: 3rem;
  margin: 4rem;
}
p::before {
  content: open-quote;
  position: absolute;
  left: -3.5rem;
  top: -2rem;
  font-size: 8rem;
  color: rgba(0, 0, 0, 0.5)
}

60. Đặt nội dung làm giá trị chuỗi của các phần tử được chọn thuộc tính đã chọn

p {
  position: relative;
  font-size: 3rem;
  margin: 4rem;
}
p::before {
  content: open-quote;
  position: absolute;
  left: -3.5rem;
  top: -2rem;
  font-size: 8rem;
  color: rgba(0, 0, 0, 0.5)
}

61. Đặt nội dung là giá trị của một

p {
  position: relative;
  font-size: 3rem;
  margin: 4rem;
}
p::before {
  content: open-quote;
  position: absolute;
  left: -3.5rem;
  top: -2rem;
  font-size: 8rem;
  color: rgba(0, 0, 0, 0.5)
}

62, thường là một số

Chuỗi

Một trong những ví dụ cơ bản nhất là việc sử dụng thêm nội dung chuỗi trước hoặc sau một phần tử. Trong ví dụ này, chúng tôi sẽ thêm một biểu tượng liên kết trước một liên kết và thêm URL cho liên kết sau nó

p {
  position: relative;
  font-size: 3rem;
  margin: 4rem;
}
p::before {
  content: open-quote;
  position: absolute;
  left: -3.5rem;
  top: -2rem;
  font-size: 8rem;
  color: rgba(0, 0, 0, 0.5)
}

9

Lưu ý khoảng trắng sau ký tự Unicode trong phần tử giả

p {
  position: relative;
  font-size: 3rem;
  margin: 4rem;
}
p::before {
  content: open-quote;
  position: absolute;
  left: -3.5rem;
  top: -2rem;
  font-size: 8rem;
  color: rgba(0, 0, 0, 0.5)
}

8 và trước dấu ngoặc đơn đầu tiên trong phần tử giả

p {
  position: relative;
  font-size: 3rem;
  margin: 4rem;
}
p::before {
  content: open-quote;
  position: absolute;
  left: -3.5rem;
  top: -2rem;
  font-size: 8rem;
  color: rgba(0, 0, 0, 0.5)
}

0. Điều này sẽ tạo khoảng cách giữa chúng và phần tử cha

Ngoài ra, bạn có thể thêm

p {
  position: relative;
  font-size: 3rem;
  margin: 4rem;
}
p::before {
  content: open-quote;
  position: absolute;
  left: -3.5rem;
  top: -2rem;
  font-size: 8rem;
  color: rgba(0, 0, 0, 0.5)
}

65 hoặc

p {
  position: relative;
  font-size: 3rem;
  margin: 4rem;
}
p::before {
  content: open-quote;
  position: absolute;
  left: -3.5rem;
  top: -2rem;
  font-size: 8rem;
  color: rgba(0, 0, 0, 0.5)
}

66 vào phần tử giả để thêm phân tách

báo giá cơ bản

Với thuộc tính

p {
  position: relative;
  font-size: 3rem;
  margin: 4rem;
}
p::before {
  content: open-quote;
  position: absolute;
  left: -3.5rem;
  top: -2rem;
  font-size: 8rem;
  color: rgba(0, 0, 0, 0.5)
}

6, bạn có thể thêm dấu ngoặc kép trước và/hoặc sau phần tử. Bây giờ, trong HTML chúng ta có thẻ

p {
  position: relative;
  font-size: 3rem;
  margin: 4rem;
}
p::before {
  content: open-quote;
  position: absolute;
  left: -3.5rem;
  top: -2rem;
  font-size: 8rem;
  color: rgba(0, 0, 0, 0.5)
}

68. Điều này cũng sẽ thêm dấu ngoặc kép xung quanh nội dung của nó. Tuy nhiên, với thuộc tính

p {
  position: relative;
  font-size: 3rem;
  margin: 4rem;
}
p::before {
  content: open-quote;
  position: absolute;
  left: -3.5rem;
  top: -2rem;
  font-size: 8rem;
  color: rgba(0, 0, 0, 0.5)
}

6, chúng ta có thể kiểm soát nhiều hơn việc triển khai

Đây là ví dụ cơ bản nhất về việc thêm dấu ngoặc kép

Bạn cũng có thể thực hiện việc này bằng cách sử dụng thẻ HTML

p {
  position: relative;
  font-size: 3rem;
  margin: 4rem;
}
p::before {
  content: open-quote;
  position: absolute;
  left: -3.5rem;
  top: -2rem;
  font-size: 8rem;
  color: rgba(0, 0, 0, 0.5)
}

68. Nhưng có lẽ chúng tôi muốn tạo kiểu cho câu trích dẫn theo cách khác. Vì vậy, hãy chỉ thêm trích dẫn mở đầu và không thêm trích dẫn kết thúc. Và chúng ta cũng hãy tạo kiểu cho câu trích dẫn mở đầu

p {
  position: relative;
  font-size: 3rem;
  margin: 4rem;
}
p::before {
  content: open-quote;
  position: absolute;
  left: -3.5rem;
  top: -2rem;
  font-size: 8rem;
  color: rgba(0, 0, 0, 0.5)
}

Kết quả

báo giá nâng cao

Chúng tôi cũng có thể chỉ định nơi chúng tôi không muốn trích dẫn. Ví dụ: bạn có thể đang trích dẫn một người đang trích dẫn một người khác. Vì vậy, bạn sẽ có các trích dẫn trong các trích dẫn, điều này có thể gây nhầm lẫn cho người đọc

Trong CodePen bên dưới, chúng tôi đang sử dụng thẻ HTML

p {
  position: relative;
  font-size: 3rem;
  margin: 4rem;
}
p::before {
  content: open-quote;
  position: absolute;
  left: -3.5rem;
  top: -2rem;
  font-size: 8rem;
  color: rgba(0, 0, 0, 0.5)
}

68, sau đó chỉ định thẻ nào sẽ không hiển thị dấu ngoặc kép

Thoạt nhìn, bạn có thể nghĩ rằng chúng ta chỉ nên xóa thẻ

p {
  position: relative;
  font-size: 3rem;
  margin: 4rem;
}
p::before {
  content: open-quote;
  position: absolute;
  left: -3.5rem;
  top: -2rem;
  font-size: 8rem;
  color: rgba(0, 0, 0, 0.5)
}

68 khi cần thiết. Nhưng bằng cách chỉ định vị trí không nên trích dẫn vẫn tăng hoặc giảm mức lồng nhau được tham chiếu từ thuộc tính

q {
  quotes: '“' '”' '‘' '’' '“' '”';
}

6

Để giải thích điều này, chúng ta cần hiểu thuộc tính

q {
  quotes: '“' '”' '‘' '’' '“' '”';
}

6. Đây chỉ đơn giản là một "mảng" các ký tự nên được sử dụng khi trích dẫn. Đây là một ví dụ

q {
  quotes: '“' '”' '‘' '’' '“' '”';
}

Đây là những bộ trích dẫn. Bộ đầu tiên sẽ được sử dụng cho cấp báo giá cao nhất. Bộ thứ hai sẽ được sử dụng cho trích dẫn lồng nhau đầu tiên. Và bộ thứ ba sẽ được sử dụng cho trích dẫn lồng nhau thứ hai. Và cứ thế, nếu có nhiều bộ hơn

Bây giờ chúng ta đã hiểu thuộc tính

q {
  quotes: '“' '”' '‘' '’' '“' '”';
}

6, tôi có thể giải thích cách hoạt động của thuộc tính

q {
  quotes: '“' '”' '‘' '’' '“' '”';
}

7 và

q {
  quotes: '“' '”' '‘' '’' '“' '”';
}

8

Với mỗi cấp độ của dấu ngoặc kép, chúng ta có thể gán các bộ ký tự khác nhau để sử dụng cho dấu ngoặc kép. Bằng cách chỉ định vị trí không nên tăng hoặc giảm một trích dẫn, mức lồng nhau được tham chiếu từ thuộc tính

q {
  quotes: '“' '”' '‘' '’' '“' '”';
}

6

Hãy xem ví dụ dưới đây. Bạn sẽ thấy rằng cấp độ trích dẫn thứ hai bị bỏ qua

Thuộc tính

Các thuộc tính có thể được sử dụng để chuyển nội dung từ HTML vào thuộc tính CSS

p {
  position: relative;
  font-size: 3rem;
  margin: 4rem;
}
p::before {
  content: open-quote;
  position: absolute;
  left: -3.5rem;
  top: -2rem;
  font-size: 8rem;
  color: rgba(0, 0, 0, 0.5)
}

6. Chúng tôi thực sự đã sử dụng điều này trong ví dụ liên kết nơi chúng tôi sử dụng thuộc tính

p {
  position: relative;
  font-size: 3rem;
  margin: 4rem;
}
p::before {
  content: open-quote;
  position: absolute;
  left: -3.5rem;
  top: -2rem;
  font-size: 8rem;
  color: rgba(0, 0, 0, 0.5)
}

50 để bao gồm chuỗi URL như một phần nội dung của chúng tôi

Một trường hợp sử dụng hoàn hảo cho điều này là một chú giải công cụ. Bạn có thể thêm thuộc tính

p {
  position: relative;
  font-size: 3rem;
  margin: 4rem;
}
p::before {
  content: open-quote;
  position: absolute;
  left: -3.5rem;
  top: -2rem;
  font-size: 8rem;
  color: rgba(0, 0, 0, 0.5)
}

51 vào một phần tử trong HTML để có chú giải công cụ tích hợp, đơn giản khi di chuột. Nhưng để tùy chỉnh điều này, chúng ta có thể sử dụng thuộc tính dữ liệu trên thẻ HTML của mình, sau đó sử dụng thuộc tính

p {
  position: relative;
  font-size: 3rem;
  margin: 4rem;
}
p::before {
  content: open-quote;
  position: absolute;
  left: -3.5rem;
  top: -2rem;
  font-size: 8rem;
  color: rgba(0, 0, 0, 0.5)
}

6 để thêm chú giải công cụ

Trong ví dụ này, chúng tôi sử dụng thuộc tính

p {
  position: relative;
  font-size: 3rem;
  margin: 4rem;
}
p::before {
  content: open-quote;
  position: absolute;
  left: -3.5rem;
  top: -2rem;
  font-size: 8rem;
  color: rgba(0, 0, 0, 0.5)
}

53 từ phần tử HTML của mình để chuyển giá trị vào chú giải công cụ của chúng tôi. Đối với con trỏ của chú giải công cụ, chúng tôi đặt

p {
  position: relative;
  font-size: 3rem;
  margin: 4rem;
}
p::before {
  content: open-quote;
  position: absolute;
  left: -3.5rem;
  top: -2rem;
  font-size: 8rem;
  color: rgba(0, 0, 0, 0.5)
}

6 thành

p {
  position: relative;
  font-size: 3rem;
  margin: 4rem;
}
p::before {
  content: open-quote;
  position: absolute;
  left: -3.5rem;
  top: -2rem;
  font-size: 8rem;
  color: rgba(0, 0, 0, 0.5)
}

55, vì cần có

p {
  position: relative;
  font-size: 3rem;
  margin: 4rem;
}
p::before {
  content: open-quote;
  position: absolute;
  left: -3.5rem;
  top: -2rem;
  font-size: 8rem;
  color: rgba(0, 0, 0, 0.5)
}

6 để hiển thị phần tử giả

p {
  position: relative;
  font-size: 3rem;
  margin: 4rem;
}
p::before {
  content: open-quote;
  position: absolute;
  left: -3.5rem;
  top: -2rem;
  font-size: 8rem;
  color: rgba(0, 0, 0, 0.5)
}

8 hoặc

p {
  position: relative;
  font-size: 3rem;
  margin: 4rem;
}
p::before {
  content: open-quote;
  position: absolute;
  left: -3.5rem;
  top: -2rem;
  font-size: 8rem;
  color: rgba(0, 0, 0, 0.5)
}

0

quầy

Hàm CSS

p {
  position: relative;
  font-size: 3rem;
  margin: 4rem;
}
p::before {
  content: open-quote;
  position: absolute;
  left: -3.5rem;
  top: -2rem;
  font-size: 8rem;
  color: rgba(0, 0, 0, 0.5)
}

61 trả về một chuỗi đại diện cho giá trị hiện tại của bộ đếm được đặt tên. Trong ví dụ sau, chúng tôi có một danh sách được sắp xếp mà chúng tôi sẽ thêm nội dung bằng cách sử dụng

p {
  position: relative;
  font-size: 3rem;
  margin: 4rem;
}
p::before {
  content: open-quote;
  position: absolute;
  left: -3.5rem;
  top: -2rem;
  font-size: 8rem;
  color: rgba(0, 0, 0, 0.5)
}

62

p {
  position: relative;
  font-size: 3rem;
  margin: 4rem;
}
p::before {
  content: open-quote;
  position: absolute;
  left: -3.5rem;
  top: -2rem;
  font-size: 8rem;
  color: rgba(0, 0, 0, 0.5)
}

6

p {
  position: relative;
  font-size: 3rem;
  margin: 4rem;
}
p::before {
  content: open-quote;
  position: absolute;
  left: -3.5rem;
  top: -2rem;
  font-size: 8rem;
  color: rgba(0, 0, 0, 0.5)
}

3

Không đi sâu vào hàm

p {
  position: relative;
  font-size: 3rem;
  margin: 4rem;
}
p::before {
  content: open-quote;
  position: absolute;
  left: -3.5rem;
  top: -2rem;
  font-size: 8rem;
  color: rgba(0, 0, 0, 0.5)
}

62, trước tiên chúng ta phải khởi tạo bộ đếm trên phần tử

p {
  position: relative;
  font-size: 3rem;
  margin: 4rem;
}
p::before {
  content: open-quote;
  position: absolute;
  left: -3.5rem;
  top: -2rem;
  font-size: 8rem;
  color: rgba(0, 0, 0, 0.5)
}

52. Chúng tôi có thể đặt tên này bất cứ điều gì chúng tôi muốn. Sau đó, chúng tôi yêu cầu bộ đếm tăng dần trên mỗi phần tử

p {
  position: relative;
  font-size: 3rem;
  margin: 4rem;
}
p::before {
  content: open-quote;
  position: absolute;
  left: -3.5rem;
  top: -2rem;
  font-size: 8rem;
  color: rgba(0, 0, 0, 0.5)
}

53. Và cuối cùng, chúng tôi đặt

p {
  position: relative;
  font-size: 3rem;
  margin: 4rem;
}
p::before {
  content: open-quote;
  position: absolute;
  left: -3.5rem;
  top: -2rem;
  font-size: 8rem;
  color: rgba(0, 0, 0, 0.5)
}

6 của

p {
  position: relative;
  font-size: 3rem;
  margin: 4rem;
}
p::before {
  content: open-quote;
  position: absolute;
  left: -3.5rem;
  top: -2rem;
  font-size: 8rem;
  color: rgba(0, 0, 0, 0.5)
}

55

Đây là kết quả

Bạn có thể sử dụng điều này để tùy chỉnh nội dung trong mỗi mục danh sách cần một số tương ứng. Hoặc bạn có thể sử dụng điều này để tùy chỉnh mục danh sách. Chẳng hạn, bạn có thể xóa cách đánh số mặc định và triển khai hệ thống đánh số theo kiểu tùy chỉnh

Hình ảnh

Hình ảnh và độ dốc có thể được sử dụng với thuộc tính

p {
  position: relative;
  font-size: 3rem;
  margin: 4rem;
}
p::before {
  content: open-quote;
  position: absolute;
  left: -3.5rem;
  top: -2rem;
  font-size: 8rem;
  color: rgba(0, 0, 0, 0.5)
}

6. Điều này khá đơn giản. Đây là một ví dụ sử dụng cả hai

Đối với khả năng truy cập, cũng có một tùy chọn để thêm văn bản thay thế cho hình ảnh. Tính năng này không được hỗ trợ đầy đủ mặc dù

p {
  position: relative;
  font-size: 3rem;
  margin: 4rem;
}
p::before {
  content: open-quote;
  position: absolute;
  left: -3.5rem;
  top: -2rem;
  font-size: 8rem;
  color: rgba(0, 0, 0, 0.5)
}

5

Ghi chú. Điều này không được hỗ trợ trong Firefox, IE và Safari. Ngoài ra, gradient không hoạt động trong Firefox

Bên ngoài các yếu tố giả

Đúng rồi. Bạn có thể sử dụng thuộc tính

p {
  position: relative;
  font-size: 3rem;
  margin: 4rem;
}
p::before {
  content: open-quote;
  position: absolute;
  left: -3.5rem;
  top: -2rem;
  font-size: 8rem;
  color: rgba(0, 0, 0, 0.5)
}

6 bên ngoài các phần tử giả

p {
  position: relative;
  font-size: 3rem;
  margin: 4rem;
}
p::before {
  content: open-quote;
  position: absolute;
  left: -3.5rem;
  top: -2rem;
  font-size: 8rem;
  color: rgba(0, 0, 0, 0.5)
}

8 và

p {
  position: relative;
  font-size: 3rem;
  margin: 4rem;
}
p::before {
  content: open-quote;
  position: absolute;
  left: -3.5rem;
  top: -2rem;
  font-size: 8rem;
  color: rgba(0, 0, 0, 0.5)
}

0. Mặc dù, việc sử dụng nó bị hạn chế và không tương thích hoàn toàn trong tất cả các trình duyệt

Trường hợp sử dụng tương thích nhất sẽ là thay thế một phần tử

p {
  position: relative;
  font-size: 3rem;
  margin: 4rem;
}
p::before {
  content: open-quote;
  position: absolute;
  left: -3.5rem;
  top: -2rem;
  font-size: 8rem;
  color: rgba(0, 0, 0, 0.5)
}

5

p {
  position: relative;
  font-size: 3rem;
  margin: 4rem;
}
p::before {
  content: open-quote;
  position: absolute;
  left: -3.5rem;
  top: -2rem;
  font-size: 8rem;
  color: rgba(0, 0, 0, 0.5)
}

1

Ghi chú. Thay thế không được hỗ trợ trong IE

Phần kết luận

Hầu hết các lần bạn sẽ thấy

p {
  position: relative;
  font-size: 3rem;
  margin: 4rem;
}
p::before {
  content: open-quote;
  position: absolute;
  left: -3.5rem;
  top: -2rem;
  font-size: 8rem;
  color: rgba(0, 0, 0, 0.5)
}

10 được tìm thấy trong các phần tử giả

p {
  position: relative;
  font-size: 3rem;
  margin: 4rem;
}
p::before {
  content: open-quote;
  position: absolute;
  left: -3.5rem;
  top: -2rem;
  font-size: 8rem;
  color: rgba(0, 0, 0, 0.5)
}

8 và

p {
  position: relative;
  font-size: 3rem;
  margin: 4rem;
}
p::before {
  content: open-quote;
  position: absolute;
  left: -3.5rem;
  top: -2rem;
  font-size: 8rem;
  color: rgba(0, 0, 0, 0.5)
}

0. Nhưng thuộc tính

p {
  position: relative;
  font-size: 3rem;
  margin: 4rem;
}
p::before {
  content: open-quote;
  position: absolute;
  left: -3.5rem;
  top: -2rem;
  font-size: 8rem;
  color: rgba(0, 0, 0, 0.5)
}

6 có nhiều ứng dụng hữu ích

Theo tôi, cách sử dụng tốt nhất là sử dụng nó để cập nhật các phần tử hàng loạt. Nếu bạn muốn thêm một biểu tượng trước mỗi liên kết trên trang web của mình, việc thêm nó thông qua thuộc tính

p {
  position: relative;
  font-size: 3rem;
  margin: 4rem;
}
p::before {
  content: open-quote;
  position: absolute;
  left: -3.5rem;
  top: -2rem;
  font-size: 8rem;
  color: rgba(0, 0, 0, 0.5)
}

6 sẽ dễ dàng hơn nhiều so với việc thêm nó vào mọi thành phần trong tài liệu HTML

Cảm ơn vì đã đọc

Cảm ơn bạn đã đọc bài viết này. Hi vọng đã giúp bạn hiểu rõ hơn về cách thức hoạt động của thuộc tính

p {
  position: relative;
  font-size: 3rem;
  margin: 4rem;
}
p::before {
  content: open-quote;
  position: absolute;
  left: -3.5rem;
  top: -2rem;
  font-size: 8rem;
  color: rgba(0, 0, 0, 0.5)
}

6 trong CSS

Tôi là Jesse đến từ Texas. Hãy xem nội dung khác của tôi và cho tôi biết cách tôi có thể giúp bạn trên hành trình trở thành nhà phát triển web

Đăng ký YouTube của tôi
nói xin chào. Instagram. Twitter
Hãy đăng ký để nhận thư mới từ tôi

QUẢNG CÁO

Hội trường Jesse

Tutorials for all things ?‍? Let me help you on your journey to becoming a web developer. Support me by subscribing to my YouTube channel ▶️ and newsletter ? codeSTACKr.com

Nếu bạn đọc đến đây, hãy tweet cho tác giả để cho họ thấy bạn quan tâm. Tweet một lời cảm ơn

Học cách viết mã miễn phí. Chương trình giảng dạy mã nguồn mở của freeCodeCamp đã giúp hơn 40.000 người có được việc làm với tư cách là nhà phát triển. Bắt đầu

 
Có trước hay không. Trước CSS?
Lưu ý dấu hai chấm. trước so với dấu hai chấm. trước. Cái nào đúng? . trước ::before . 
Là gì. trước và. sau dùng để làm gì?
CSS. trước và. sau phần tử giả cho phép bạn chèn “nội dung” vào trước và sau bất kỳ phần tử nào không được thay thế (e. g. chúng hoạt động trên 
Đâu là sự khác biệt giữa aftervà. sau trong CSS?
CSS. trước khi bộ chọn chèn nội dung trước phần tử được chọn. CSS. sau khi chèn nội dung sau một phần tử được chỉ định
Là gì. chữ cái đầu tiên trong CSS?
Trong CSS,. phần tử giả chữ cái đầu tiên áp dụng cho các vùng chứa giống khối như khối, mục danh sách, ô bảng, chú thích bảng và phần tử khối nội tuyến. In CSS a ::first-line pseudo-element is similar to an inline-level element if its 'float' property is 'none'; otherwise, it is similar to a floated element.

programming css

::sau css

Điều kiện tiên quyết

Giá trị được chấp nhận

Chuỗi

báo giá cơ bản

báo giá nâng cao

Thuộc tính

quầy

Hình ảnh

Bên ngoài các yếu tố giả

Phần kết luận

Cảm ơn vì đã đọc

Có trước hay không. Trước CSS?

Là gì. trước và. sau dùng để làm gì?

Đâu là sự khác biệt giữa aftervà. sau trong CSS?

Là gì. chữ cái đầu tiên trong CSS?

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội