:: before/:: после того, как псевдокласс не работает над элементом видео

Question

Я хочу, чтобы мой элемент видео показывал заголовок над видео во время игры, проблема в том, что он не работает. Если я переключу < видео > тег на <div>, он отлично работает. Что я делаю не так?

Мой HTML разметки заключается в следующем:

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

И мой CSS это:

.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

:before Использование или :after на <video> тег не будет работать. Вы также найдете этот случай (к сожалению) с помощью элементов управления HTML (например, текстовых полей).

Это связано с тем, как работают :before и :after элементы psuedo. Это объекты модели коробки, которые работают, например. например div, но размещены внутри их родительский элемент. Элементы, такие как входные текстовые поля и видео, не могут содержать дочерние элементы в отношении содержимого (видео имеют дочерние теги src, но это разные).

E.g. если вы имели HTML:

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

И CSS:

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

Визуализированное эффект будет:

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

Подробнее:

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

Старый Stackoverflow Ответ: Which elements support the ::before and ::after pseudo-elements?