Nội dung trước css

Trong CSS,

<q>Some quotes</q>, he said, <q>are better than none.</q>
0 tạo một phần tử giả là phần tử con đầu tiên của phần tử được chọn. Nó thường được sử dụng để thêm nội dung mỹ phẩm vào một phần tử có thuộc tính
<q>Some quotes</q>, he said, <q>are better than none.</q>
1. Nó là nội tuyến theo mặc định

Thử nó

Ghi chú. Các phần tử giả được tạo bởi

<q>Some quotes</q>, he said, <q>are better than none.</q>
0 và
<q>Some quotes</q>, he said, <q>are better than none.</q>
3 được chứa trong hộp định dạng của phần tử và do đó không áp dụng cho các phần tử được thay thế, chẳng hạn như phần tử
<q>Some quotes</q>, he said, <q>are better than none.</q>
4 hoặc cho phần tử
<q>Some quotes</q>, he said, <q>are better than none.</q>
5

cú pháp

::before

Ghi chú. Bộ chọn cấp 3 đã giới thiệu ký hiệu dấu hai chấm

<q>Some quotes</q>, he said, <q>are better than none.</q>
0 để phân biệt các lớp giả với các phần tử giả. Trình duyệt cũng chấp nhận ký hiệu dấu hai chấm
<q>Some quotes</q>, he said, <q>are better than none.</q>
7, được giới thiệu trong CSS2

ví dụ

Thêm dấu ngoặc kép

Một ví dụ đơn giản về việc sử dụng phần tử giả

<q>Some quotes</q>, he said, <q>are better than none.</q>
0 là cung cấp dấu ngoặc kép. Ở đây chúng tôi sử dụng cả
<q>Some quotes</q>, he said, <q>are better than none.</q>
0 và
<q>Some quotes</q>, he said, <q>are better than none.</q>
4 để chèn ký tự trích dẫn

HTML

<q>Some quotes</q>, he said, <q>are better than none.</q>

CSS

<q>Some quotes</q>, he said, <q>are better than none.</q>
3

Kết quả

ví dụ trang trí

Chúng ta có thể tạo kiểu cho văn bản hoặc hình ảnh trong thuộc tính

<q>Some quotes</q>, he said, <q>are better than none.</q>
1 theo bất kỳ cách nào chúng ta muốn

HTML

<q>Some quotes</q>, he said, <q>are better than none.</q>
5

CSS

<q>Some quotes</q>, he said, <q>are better than none.</q>
6

Kết quả

Những việc cần làm

Trong ví dụ này, chúng tôi sẽ tạo một danh sách việc cần làm đơn giản bằng cách sử dụng các phần tử giả. Phương pháp này thường có thể được sử dụng để thêm các chi tiết nhỏ vào giao diện người dùng và cải thiện trải nghiệm người dùng

HTML

<q>Some quotes</q>, he said, <q>are better than none.</q>
7

CSS

<q>Some quotes</q>, he said, <q>are better than none.</q>
8

JavaScript

<q>Some quotes</q>, he said, <q>are better than none.</q>
9

Đây là ví dụ mã trên đang chạy trực tiếp. Lưu ý rằng không có biểu tượng nào được sử dụng và dấu kiểm thực sự là

<q>Some quotes</q>, he said, <q>are better than none.</q>
0 đã được tạo kiểu trong CSS. Đi trước và hoàn thành một số công việc

Kết quả

Ký tự đặc biệt

Vì đây là CSS; . Nếu bạn cần sử dụng một ký tự đặc biệt và không thể nhập ký tự đó theo nghĩa đen vào chuỗi nội dung CSS của mình, hãy sử dụng chuỗi thoát unicode, bao gồm dấu gạch chéo ngược theo sau là giá trị unicode thập lục phân

HTML

<q>Some quotes</q>, he said, <q>are better than none.</q>
1

CSS

<q>Some quotes</q>, he said, <q>are better than none.</q>
2

Kết quả

Mối quan tâm về khả năng tiếp cận

Việc sử dụng phần tử giả

<q>Some quotes</q>, he said, <q>are better than none.</q>
0 để thêm nội dung không được khuyến khích vì trình đọc màn hình không thể truy cập phần tử này một cách đáng tin cậy