::before/::after 伪类不适用于视频元素答案

【问题标题】：::before/::after pseudo class not working on video element::before/::after 伪类不适用于视频元素
【发布时间】：2014-12-30 06:58:39
【问题描述】：

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

它工作得非常好。我做错了什么？

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

【问题讨论】：

您不能将 :pseudo-element 添加到 video 标记中。
谢谢，解释了很多。是否有一个原因？有什么文件吗？
你可以在这里阅读更多关于伪元素的信息----> w3.org/TR/2009/CR-CSS2-20090908/…
为了解决您的问题，您可以随时向容器 div 添加一个伪元素。
我希望避免这种情况，因为现在我必须使用 JavaScript 解决方案将视频的“标题”属性传输给它的父级。

标签： html css video

【解决方案1】：

在<video> 标签上使用:before 或:after 将不起作用。您还会发现这种情况（很遗憾）是 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>

旧 Stackoverflow 答案：Which elements support the ::before and ::after pseudo-elements?

【讨论】：