:before/:: after псевдокласс не работает на элементе video

Question

:before/:: after псевдокласс не работает на элементе video

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

, он отлично работает. Что я делаю не так?

Моя 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;

}

588 1

html css video

1 ответ:

Comments

Ничего не найдено.

Samuel MacLachlan · Accepted Answer · 2017-05-23 15:32:23

Использование :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

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