:: trước/:: sau khi lớp giả không hoạt động trên phần tử video

Question

Tôi muốn phần tử video của mình hiển thị tiêu đề trên video trong khi phát, vấn đề là: nó không hoạt động. Nếu tôi chuyển đổi thẻ <video> thành <div>, thẻ sẽ hoạt động hoàn toàn tốt. Tôi đang làm gì sai?

đánh dấu HTML của tôi là thế này:

<div class="player"> 
    <video src="video.mp4" poster="video-poster.jpg" title="Video Name"></video> 
</div> 

Và CSS của tôi là thế này:

.player { 
    position: relative; 
    width: 852px; 
    height: 356px; 
} 
.player video { 
    position: relative; 
    top: 0; 
    left: 0; 
    bottom: 0; 
    right: 0; 
    display: block; 
} 
.player video::after { 
    content: attr(title); 
    position: absolute; 
    top: 10px; 
    right: 15px; 
    color: #fff; 
    display: block; 
    height: 20px; 
} 

Answer 1

Sử dụng :before hoặc :after trên một thẻ <video> sẽ không hoạt động. Bạn cũng sẽ thấy trường hợp này (thật đáng buồn) với các điều khiển nhập HTML (ví dụ: hộp văn bản).

Điều này là do cách thức :before và :after yếu tố psuedo hoạt động. Chúng là các đối tượng mô hình hộp hoạt động, ví dụ: giống như một số div nhưng được đặt bên trong phần tử gốc của chúng. Các phần tử như hộp văn bản đầu vào và video không thể chứa các phần tử con theo nội dung liên quan (video có thẻ con src nhưng khác nhau).

Ví dụ: nếu bạn đã HTML:

<div class="awesome-highlight"> 
... 
</div> 

Và CSS:

.awesome-highlight::after { 
    content: 'Hello World'; 
} 

Các render hiệu lực thi hành sẽ là:

<div class="awesome-highlight"> 
... 
Hello World 
</div> 

Thông tin thêm:

W3: http://www.w3.org/TR/CSS21/generate.html

Câu trả lời Stackoverflow cũ: Which elements support the ::before and ::after pseudo-elements?