:: before/:: pseudo sınıfının video elemanı üzerinde çalışmamasının ardından

Question

Video öğemde oynatılırken video üzerinden bir başlık gösterilmesini istiyorum, sorun şu ki: çalışmıyor. <video> etiketini <div>'a değiştirirseniz, mükemmel bir şekilde çalışır. Neyi yanlış yapıyorum?

Benim HTML biçimlendirme şudur:

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

Ve CSS şudur:

.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

çalışmayacak bir <video> etikette :before veya :after kullanma. Ayrıca bu durumu HTML giriş kontrolleriyle (örneğin metin kutuları) da (üzücü) bulacaksınız.

Bu, :before ve :after psuedo öğelerinin çalışmasından kaynaklanmaktadır. Örneğin, örnek olarak çalışan kutu model nesneleridir. div gibi, ancak'un ana öğesinin içine yerleştirilir. Giriş metin kutuları ve videolar gibi öğeler, içerikle ilgili olarak çocuk öğeleri içeremez (videoda, src alt etiketleri vardır, ancak bu farklıdır).

E.g.

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

Ve CSS: HTML olsaydı

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

render etkisi olacaktır:

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

diğer bilgiler:

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

Eski Stackoverflow cevap: Bir `video` etiketine sözde elemanı: Which elements support the ::before and ::after pseudo-elements?