sau phần tử giả không xuất hiện trong mã

Question

Tôi đang cố gắng sử dụng phần tử giả sau để thêm một số hiệu ứng cho trang web.

<div class="product-show style-show"> 
    <ul> 
    <li> 
     .... 
     <div class="..."> 
     <div class="readMore less">...</div> 
     <a href="3" class="readMoreLink" onclick="return false;">Read More</a> 
     </div> 
     .... 
    </li> 
    </ul> 
</div> 

Và stylesheets:

.product-show .readMore.less { 
    max-height: 200px; 
    height: 100%; 
    overflow: hidden; 
} 

.product-show .readMore.less:after { 
    background: rgba(255, 255, 255, 0); 
    display: block; 
    position: absolute; 
    bottom: 0; 
    left: 0; 
    width: 100%; 
    height: 30px; 
} 

tôi thấy phong cách cho .product-show .readMore.less đang được áp dụng, nhưng tôi không thấy a :: sau ký hiệu trong các khối HTML khi tôi đang kiểm tra trang web từ Chrome (phiên bản mới nhất)/MacOS. Tôi đọc rằng đôi khi có vấn đề với các trình duyệt cũ hơn, nhưng tôi cho rằng tôi sẽ có thể thấy ít nhất là :: sau ký hiệu phần tử giả nếu tôi định nghĩa kiểu dáng một cách chính xác. Tôi đang làm gì sai?

Answer 1

Đó là vì phần tử giả isn't generated if the content value is omitted (vì giá trị ban đầu/mặc định là none).

Chỉ định giá trị content để tạo phần tử giả. Giá trị '' là đủ.

.product-show .readMore.less:after { 
    content: ''; 
    background: rgba(255, 255, 255, 0); 
    display: block; 
    position: absolute; 
    bottom: 0; 
    left: 0; 
    width: 100%; 
    height: 30px; 
} 

Answer 2

Theo MDN:

Thuộc tính CSS nội dung được sử dụng với :: trước và sau :: giả yếu tố để tạo ra nội dung trong một phần tử.

Điều này có nghĩa là nếu bạn không bao gồm các content bất động sản, các yếu tố :after hoặc :before sẽ không hiển thị hoàn toàn.

Thêm dòng này vào mã của bạn:

content: ""; // Leave this empty 

Và xem làm thế nào có ảnh hưởng đến kết quả.

Cũng giống như ghi chú, thông thường bạn sẽ thêm văn bản vào thuộc tính content khi yếu tố :before hoặc :after được sử dụng để hiển thị văn bản. Tuy nhiên, trong nhiều trường hợp, bạn sẽ thấy rằng bạn chỉ đơn giản là để trống nó.