DigitalOcean cung cấp các sản phẩm đám mây cho mọi giai đoạn của hành trình của bạn. Bắt đầu với $ 200 trong tín dụng miễn phí!
Các yếu tố giả ::before và ::after trong CSS cho phép bạn chèn nội dung vào một trang mà không cần phải ở trong HTML. Mặc dù kết quả cuối cùng không thực sự nằm trong DOM, nhưng nó xuất hiện trên trang như thể nó, và về cơ bản sẽ như thế này:
div::before { content: "before"; } div::after { content: "after"; }<div> before <!-- Rest of stuff inside the div --> after </div>Lý do duy nhất để sử dụng cái này hơn cái kia là:
- Bạn muốn nội dung được tạo đến trước nội dung phần tử, theo vị trí.
- Nội dung ::after cũng là sau khi theo thứ tự nguồn, do đó, nó sẽ đặt vị trí trên đầu :: trước khi xếp chồng lên nhau một cách tự nhiên.
Lưu ý rằng nội dung vẫn còn bên trong phần tử mà chúng được áp dụng. Loại đặt tên cảm giác như họ có thể đến, ya biết, trước hoặc sau yếu tố, nhưng nó thực sự trước hoặc sau nội dung khác bên trong.
Giá trị cho nội dung có thể là:
- Một chuỗi: content: "a string"; - Các ký tự đặc biệt cần được mã hóa đặc biệt như một thực thể Unicode. Xem trang Glyphs. content: "a string"; — special characters need to be specially encoded as a unicode entity. See the glyphs page.
- Một hình ảnh: content: url(/path/to/image.jpg); - Hình ảnh được chèn vào kích thước chính xác của nó và không thể thay đổi kích thước. Vì những thứ như độ dốc thực sự là hình ảnh, một yếu tố giả có thể là một gradient. content: url(/path/to/image.jpg); — 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.
- Không có gì: content: ""; - hữu ích cho ClearFixes và chèn hình ảnh dưới dạng background-image (đặt ____10 và <div> before <!-- Rest of stuff inside the div --> after </div>1, và thậm chí có thể thay đổi kích thước bằng <div> before <!-- Rest of stuff inside the div --> after </div>2). content: ""; — Useful for clearfixes and inserting images as a background-image (set <div> before <!-- Rest of stuff inside the div --> after </div>0 and <div> before <!-- Rest of stuff inside the div --> after </div>1, and can even resize with <div> before <!-- Rest of stuff inside the div --> after </div>2).
- Một bộ đếm: <div> before <!-- Rest of stuff inside the div --> after </div>3 - Thực sự hữu ích cho danh sách kiểu dáng (nhưng chúng tôi cũng có <div> before <!-- Rest of stuff inside the div --> after </div>4 cho điều đó). <div> before <!-- Rest of stuff inside the div --> after </div>3 — Really useful for styling lists (but we also have <div> before <!-- Rest of stuff inside the div --> after </div>4 for that).
- Break Line Break: <div> before <!-- Rest of stuff inside the div --> after </div>5 - Tuyệt vời khi bạn thực sự cần một. <div> before <!-- Rest of stuff inside the div --> after </div>5 — Great for when you really need one.
Lưu ý rằng bạn có thể chèn các thực thể HTML vào thuộc tính <div> before <!-- Rest of stuff inside the div --> after </div>6, 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ự.
content: "<h2>I will not render as a Heading 1</h2>";<div> before <!-- Rest of stuff inside the div --> after </div>7 so với <div> before <!-- Rest of stuff inside the div --> after </div>8
Mỗi trình duyệt hỗ trợ cú pháp CSS3 Colon (<div> before <!-- Rest of stuff inside the div --> after </div>8) CSS3 cũng chỉ hỗ trợ cú pháp (<div> before <!-- Rest of stuff inside the div --> after </div>7), nhưng Internet Explorer (tức là 8 chỉ hỗ trợ Hỗ trợ trình duyệt.
<div> before <!-- Rest of stuff inside the div --> after </div>8 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 ::before và content: "<h2>I will not render as a Heading 1</h2>";3
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