Các tác giả chỉ định kiểu và vị trí của nội dung được tạo với: trước và: sau các yếu tố giả. Như tên của họ chỉ ra,: trước và: sau các phần tử giả chỉ định vị trí của nội dung trước và sau nội dung cây tài liệu của một phần tử. Thuộc tính 'nội dung', kết hợp với các yếu tố giả này, chỉ định những gì được chèn.
Dưới đây là một cây tài liệu với HTML là gốc.
HTML
.HEAD
..TITLE
.BODY
..H1
..P
..UL
...LI
...LI
...LI
Ví dụ: quy tắc sau chèn chuỗi "Lưu ý:" Trước nội dung của mọi thành phần P có thuộc tính "lớp" có giá trị "Lưu ý":
p.note:before { content: "Note: " }
Các đối tượng định dạng [ví dụ: các hộp] được tạo bởi một phần tử bao gồm nội dung được tạo. Vì vậy, ví dụ, thay đổi bảng kiểu trên thành:
p.note:before { content: "Note: " }
p.note { border: solid green }
sẽ làm cho một đường viền màu xanh lá cây rắn được hiển thị xung quanh toàn bộ đoạn văn, bao gồm cả chuỗi ban đầu.
: Trước và: sau khi các yếu tố giả kế thừa bất kỳ thuộc tính di truyền nào từ phần tử trong cây tài liệu mà chúng được đính kèm.
Ví dụ: các quy tắc sau chèn một dấu trích dẫn mở trước mỗi phần tử Q. Màu sắc của dấu trích dẫn sẽ có màu đỏ, nhưng phông chữ sẽ giống như phông chữ của phần còn lại của phần tử Q:
q:before {
content: open-quote;
color: red
}
Trong A: Trước hoặc: Sau khi khai báo giả yếu tố, các thuộc tính không được sử dụng lấy các giá trị ban đầu của chúng.
Vì vậy, ví dụ, vì giá trị ban đầu của thuộc tính 'hiển thị' là 'nội tuyến', báo giá trong ví dụ trước được chèn dưới dạng hộp nội tuyến [nghĩa là trên cùng một dòng với nội dung văn bản ban đầu của phần tử]. Ví dụ tiếp theo đặt rõ ràng thuộc tính 'Display' thành 'Block', để văn bản được chèn trở thành một khối:
body:after {
content: "The End";
display: block;
margin-top: 2em;
text-align: center;
}
Các: Trước và: Sau khi các phần tử yếu tố giả tương tác với các hộp khác, chẳng hạn như các hộp chạy, như thể chúng là các phần tử thực được chèn ngay bên trong phần tử liên quan của chúng.
Ví dụ: đoạn tài liệu sau đây và bảng kiểu:
Header
h2 { display: run-in; }
Text
p:before { display: block; content: 'Some'; }
... sẽ hiển thị chính xác giống như đoạn tài liệu sau đây và bảng kiểu:
Header
h2 { display: run-in; }
Some Text
span { display: block }
Tương tự, phần tài liệu và kiểu mẫu sau đây:
Header
h2 { display: run-in; }
h2:after { display: block; content: 'Thing'; }
Text
... sẽ hiển thị chính xác giống như đoạn tài liệu sau đây và bảng kiểu:
Header Thing
h2 { display: block; }
span { display: block; }
Text
Bài viết về ngày 12 tháng 1 năm 2021
Cách thêm dấu phẩy giữa danh sách các mục động với CSS
div::before {
content: "before";
}
div::after {
content: "after";
}
p.note:before { content: "Note: " }
0Bài viết về ngày 9 tháng 2 năm 2022
- Cách làm các thùng chứa CSS nghiêng
- Bài viết về ngày 2 tháng 3 năm 2022
Làm thế nào để tạo ra một người nâng cao hiệu ứng của rèm cửa trong CSS
Bài viết vào ngày 7 tháng 4 năm 2020
- Cách tạo lại hoạt hình Netflix tiện lợi trong CSS
5 — special characters need to be specially encoded as a unicode entity. See the glyphs page.p.note:before { content: "Note: " }
- Bài viết vào ngày 14 tháng 10 năm 2020
6 — The image is inserted at it’s exact dimensions and cannot be resized. Since things like gradients are actually images, a pseudo element can be a gradient.p.note:before { content: "Note: " }
- Không có gì:
7 - Hữu ích cho ClearFixes và chèn hình ảnh dưới dạngp.note:before { content: "Note: " }
8 [đặtp.note:before { content: "Note: " }
9 vàp.note:before { content: "Note: " }
0, và thậm chí có thể thay đổi kích thước bằngp.note:before { content: "Note: " } p.note { border: solid green }
1].p.note:before { content: "Note: " } p.note { border: solid green }
7 — Useful for clearfixes and inserting images as ap.note:before { content: "Note: " }
8 [setp.note:before { content: "Note: " }
9 andp.note:before { content: "Note: " }
0, and can even resize withp.note:before { content: "Note: " } p.note { border: solid green }
1].p.note:before { content: "Note: " } p.note { border: solid green }
- Một bộ đếm:
2 - Thực sự hữu ích cho danh sách kiểu dáng [nhưng chúng tôi cũng cóp.note:before { content: "Note: " } p.note { border: solid green }
3 cho điều đó].p.note:before { content: "Note: " } p.note { border: solid green }
2 — Really useful for styling lists [but we also havep.note:before { content: "Note: " } p.note { border: solid green }
3 for that].p.note:before { content: "Note: " } p.note { border: solid green }
- Break Line Break:
4 - Tuyệt vời khi bạn thực sự cần một.p.note:before { content: "Note: " } p.note { border: solid green }
4 — Great for when you really need one.p.note:before { content: "Note: " } p.note { border: solid green }
Lưu ý rằng bạn có thể chèn các thực thể HTML vào thuộc tính
p.note:before { content: "Note: " }
p.note { border: solid green }
5, nhưng không có xúc xắc nào xa như chúng kết xuất hoặc bất cứ thứ gì tương tự.p.note:before { content: "Note: " }
1p.note:before { content: "Note: " }
p.note { border: solid green }
6 vs p.note:before { content: "Note: " }
p.note { border: solid green }
7
p.note:before { content: "Note: " }
p.note { border: solid green }
p.note:before { content: "Note: " }
p.note { border: solid green }
Mỗi trình duyệt hỗ trợ cú pháp CSS3 Colon [
p.note:before { content: "Note: " }
p.note { border: solid green }
7] CSS3 cũng chỉ hỗ trợ cú pháp [p.note:before { content: "Note: " }
p.note { border: solid green }
6], nhưng Internet Explorer [tức là 8 chỉ hỗ trợ Hỗ trợ trình duyệt.p.note:before { content: "Note: " }
p.note { border: solid green }
7 là định dạng mới hơn nhằm phân biệt nội dung giả với bộ chọn giả. Nếu bạn không cần hỗ trợ IE 8, hãy thoải mái sử dụng đại tá kép.Hỗ trợ trình duyệt
Máy tính để bàn
4 | 2 | 9 | 12 | 3.1 |
Di động / máy tính bảng
107 | 106 | 2.1 | 3.2 |
Các thủ thuật sử dụng p.note:before { content: "Note: " }
2 và q:before {
content: open-quote;
color: red
}
2
p.note:before { content: "Note: " }
q:before {
content: open-quote;
color: red
}
7 Sử dụng thực tế cho :: Trước và :: sau các yếu tố giả trong CSS
1 yếu tố CSS Rainbow Gradient Infinity
Một bảng nội dung hoàn hảo với HTML + CSS
Hoạt hình nghệ thuật div đơn
Các lớp giả nhà nước tùy chỉnh trong chrome
CSS Pseudo Commas
Cách thêm dấu phẩy giữa danh sách các mục động với CSS
Cách làm các thùng chứa CSS nghiêng
Làm thế nào để tạo ra một người nâng cao hiệu ứng của rèm cửa trong CSS
Cách tạo lại hoạt hình Netflix tiện lợi trong CSS
Cách tạo lại hiệu ứng gợn của các nút thiết kế vật liệu
Tiêm một dòng phá vỡ
Tái tạo hiệu ứng văn bản bị cắt ngắn của MDN
Trình tải phần tử đơn: Các dấu chấm
Trình tải phần tử đơn: Các dấu chấm
Trình tải phần tử đơn: spinner
Bài viết về ngày 29 tháng 8 năm 2018
Bài viết về ngày 4 tháng 2 năm 2022
Video vào ngày 25 tháng 2 năm 2015
#94: Giới thiệu về các yếu tố giả18:37 Bài viết vào ngày 19 tháng 8 năm 2021
Bài viết về ngày 9 tháng 7 năm 2019
Bài viết về ngày 14 tháng 12 năm 2020
Bài viết về ngày 5 tháng 6 năm 2020
Hoạt hình nghệ thuật div đơn
1 yếu tố CSS Rainbow Gradient Infinity