Html ：：before/：：after伪类不处理视频元素

我想让我的视频元素在播放时在视频上显示一个标题，问题是：它不工作。如果我把标签换成a，效果会很好。我做错了什么

我的HTML标记如下：

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

---

在

标记上使用

：before

或

：after

将不起作用。对于HTML输入控件（例如文本框），您也会发现这种情况（很遗憾）

这是因为

：在
之前和
：在
之后psuedo元素的工作方式。它们是长方体模型对象，工作方式类似于
div
，但放置在其父元素中。就内容而言，像输入文本框和视频这样的元素不能包含子元素（视频有src子标记，但这是不同的）

例如，如果您有HTML：

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

渲染效果将是：


... 
你好，世界

更多信息：

W3：

旧的Stackoverflow回答：
您不能将：伪元素添加到
video
标记中。谢谢，解释了很多。这有什么原因吗？有文档吗？您可以在这里阅读更多关于伪元素的内容---->要解决您的问题，您可以始终向容器
div
添加伪元素。我希望避免这种情况，因为现在我必须使用JavaScript解决方案将视频的“title”属性传输到其父级。
<div class="awesome-highlight">
...
</div>

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

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