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

Я хочу, чтобы мой элемент видео показывал заголовок над видео во время его воспроизведения, проблема в том, что он не работает. Если я переключу тег <video> на <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;
}

Ответ 1

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

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

Например, если у вас есть 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

Ответ Old Stackoverflow: какие элементы поддерживают псевдо-элементы :: before и :: after?