html -::before/::after 伪类不适用于视频元素

Question

我希望我的视频元素在播放时在视频上方显示标题，问题是:它不起作用。如果我将

，它就可以正常工作。我做错了什么？

我的 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;
}

最佳答案

使用 :before或 :after在 <video> 上标签不起作用。对于 HTML 输入控件(例如文本框)，您也会(遗憾地)发现这种情况。

这是因为方式:before和 :after伪元素工作。它们是可以工作的盒子模型对象，例如像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 答案:Which elements support the ::before and ::after pseudo-elements?

关于html -::before/::after 伪类不适用于视频元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27700951/

Answer 1

使用 :before或 :after在 <video> 上标签不起作用。对于 HTML 输入控件(例如文本框)，您也会(遗憾地)发现这种情况。

这是因为方式:before和 :after伪元素工作。它们是可以工作的盒子模型对象，例如像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 答案:Which elements support the ::before and ::after pseudo-elements?