CSS: sau khi không thêm nội dung vào các phần tử nhất định

Tôi đang gặp sự cố khi hiểu hoạt động của thuộc tính CSS :after. Theo thông số kỹ thuật ( tại đây và đây ):

Như tên của chúng chỉ ra, các phần tử :beforevà :aftergiả 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ử.

Điều này dường như không đặt ra hạn chế đối với những phần tử nào có thể có :after(hoặc :before) thuộc tính. Tuy nhiên, nó dường như chỉ hoạt động với các yếu tố cụ thể ... <p>hoạt động, <img>không, <input>không, <table>không. Tôi có thể kiểm tra nhiều hơn, nhưng vấn đề đã được thực hiện. Lưu ý rằng điều này có vẻ khá nhất quán trên các trình duyệt. Điều gì xác định liệu một đối tượng có thể chấp nhận một :beforevà thuộc :aftertính?

imgvà inputđều là phần tử được thay thế .

Phần tử được thay thế là bất kỳ phần tử nào có diện mạo và kích thước được xác định bởi tài nguyên bên ngoài. Ví dụ như hình ảnh ( <img>thẻ), plugin ( <object>thẻ), và các yếu tố hình thức ( <button>, <textarea>, <input>, và <select>thẻ). Tất cả các loại phần tử khác có thể được coi là phần tử không thay thế.

:beforevà :afterchỉ hoạt động với các phần tử không bị thay thế.

Từ thông số kỹ thuật :

Ghi chú. Đặc tả này không xác định đầy đủ sự tương tác của :beforevà :aftervới các phần tử được thay thế (chẳng hạn như IMG trong HTML). Điều này sẽ được xác định chi tiết hơn trong một thông số kỹ thuật trong tương lai.

Với span:before, span:after, DOM trông giống như sau:

<span><before></before>Content of span<after></after></span>

Rõ ràng, điều đó sẽ không hoạt động với <img src="" />.

:beforevà :afterkhông bắt buộc phải hoạt động đối với các phần tử được thay thế và các thông số kỹ thuật CSS không chỉ định cách chúng sẽ hoạt động cho chúng và khái niệm về phần tử được thay thế hơi mơ hồ.

Đặc tả CSS 2.1 gợi ý rõ ràng rằng chúng có thể hoạt động cho các phần tử được thay thế, chỉ nói rằng nó không “xác định đầy đủ” cách thức. Điều này liên quan đến vấn đề rằng một phần tử được thay thế dự kiến ​​sẽ có hiển thị hình ảnh riêng của nó, điều này không được CSS kiểm soát, trong khi các phần tử giả phải thêm một cái gì đó vào nội dung của phần tử. Thông số cho biết thêm rằng điều này sẽ được xác định "chi tiết hơn" trong một thông số kỹ thuật trong tương lai, nhưng điều này đã không diễn ra cho đến nay.

Các nhà cung cấp trình duyệt vừa quyết định tránh các vấn đề bằng cách không triển khai các phần tử giả này cho một số phần tử.

Không rõ “phần tử được thay thế” nghĩa là gì, và ý nghĩa dường như đã thay đổi phần nào. Nó thường được hiểu có nghĩa giống như phần tử rỗng (phần tử có EMPTYnội dung được khai báo, tức là phần tử không thể có bất kỳ nội dung nào), nhưng bản thân CSS 2.1 hiển thị một biểu định kiểu mẫu với bộ chọnbr:before (mặc dù các trình duyệt đã bỏ qua này, thực hiện brriêng của họ đường). Có thể lập luận rằng ngày càng nhiều phần tử đã chuyển sang phạm vi hiển thị CSS, ít nhất là một phần. Ví dụ: một inputphần tử (bao gồm phông chữ, màu sắc, v.v.) phần lớn có thể kiểm soát được bằng CSS trong các trình duyệt hiện đại.

Các trình duyệt hiện tại (Firefox, IE, Chrome) dường như không hỗ trợ các phần tử :aftervà :beforegiả cho các phần tử trống hr. Đối với hr, IE và Chrome đặt nội dung được tạo bên trong hộp có viền, đây là việc triển khaihr ; nội dung làm cho hộp cao hơn. Firefox đặt nội dung của cả hai phần tử giả (!) Sau quy tắc ngang mà nó thực hiện hr. Biến thể này minh họa các loại vấn đề "tương tác" được đề cập trong CSS 2.1.

Người ta thường tuyên bố rằng các phần tử giả này không thể được sử dụng cho các phần tử trống vì các định nghĩa HTML của chúng không cho phép bất kỳ nội dung nào. Đây là một lỗi danh mục. Các quy tắc cú pháp của ngôn ngữ đánh dấu không hạn chế những gì bạn có thể làm trong CSS

Để kết luận, :aftervà :beforehiện tại không thể sử dụng được cho các phần tử trống (ngoại trừ một chút cho hr), nhưng điều này chủ yếu là do triển khai và có thể thay đổi trong tương lai.

Các phần tử không có thẻ đóng là phần tử vô hiệu và chúng không thể hiển thị nội dung bên trong chúng:

https://www.w3.org/TR/html5/syntax.html#void-elements

Tất cả các trình duyệt Blink, Webkit và Quantum chỉ cho phép bạn tạo các phần tử giả trên các hộp kiểm nhưng điều này gây tranh cãi vì không có thông số kỹ thuật nào cho phép hành vi này.

Đây là một ví dụ: https://codepen.io/equinusocio/pen/BOBaEM/

input[type="checkbox"] {
  appearance: none;
  color: #000;
  width: 42px;
  height: 24px;
  border: 1px solid currentColor;
  border-radius: 100px;
  cursor: pointer;
  transition: all 100ms;
  background-size: 30%;
  outline: none;
  position: relative;
  box-sizing: border-box;
  background-color: #eee;
  transition: background-color 200ms;

  &::before {
    content: '';
    position: absolute;
    left: 2px;
    top: 2px;
    bottom: 2px;
    height: 18px;
    width: 18px;
    border-radius: 50%;
    background-color: currentColor;
    will-change: transform;
    transition: transform 200ms cubic-bezier(.01,.65,.23,1);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  }

  &:checked {
    background-color: aquamarine;

    &::before {
      transform: translateX(100%);
    }
  }
}