Hướng dẫn when to use before and ::after css - khi nào nên sử dụng before và ::after css

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>

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>

<div>
  before
  <!-- Rest of stuff inside the div -->
  after
</div>

<div>
  before
  <!-- Rest of stuff inside the div -->
  after
</div>

Hỗ trợ trình duyệt

Máy tính để bàn

Di động / máy tính bảng

Các thủ thuật sử dụng ::before và content: "<h2>I will not render as a Heading 1</h2>";3

Trình tải phần tử đơn: spinner

Có phải trước đó hay :: trước CSS?

Tại sao bạn sẽ sử dụng trước và sau CSS?