:: before/:: after pseudo class nie działa na element wideo

Question

Chciałbym, aby mój element wideo pokazywał tytuł podczas odtwarzania wideo, problem polega na tym, że nie działa. Jeśli zmienię tag <wideo> na <div>, to działa doskonale. Co ja robię źle?

Moje znaczniki HTML jest taka:

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

A mój CSS jest taka:

.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

Korzystanie :before lub :after na <video> tag nie będzie działać. Znajdziesz to również (niestety) za pomocą kontrolek wejściowych HTML (na przykład pól tekstowych).

Dzieje się tak ze względu na sposób działania elementów psuedo: :before i . Są to obiekty typu box, które działają np. jak div, ale są umieszczane w ich elementach nadrzędnych jako wewnątrz. Elementy takie jak pola tekstowe i wideo nie mogą zawierać elementów podrzędnych w odniesieniu do zawartości (wideo ma znaczniki podrzędne src, ale jest inaczej).

E.g. jeśli miał HTML:

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

i CSS:

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

wytopione efekt będą:

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

Więcej informacji:

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

Old Stackoverflow odpowiedź: Which elements support the ::before and ::after pseudo-elements?