视频元素上的::before/::after伪类不起作用

Question

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

- Nathan Bishop

---

无法为video标签添加伪元素(:pseudo-element)。 - Weafs.py

谢谢，解释得很清楚。这是有原因的吗？有文档吗？ - Nathan Bishop

为了解决您的问题，您可以在容器div中添加一个伪元素。 - Weafs.py

我本来希望避免这种情况，因为现在我不得不使用JavaScript解决方案将视频的“title”属性传递给它的父级。 - Nathan Bishop

video 标签具有“closed”影子根，因此您无法使用伪元素修改它们 - https://developers.google.com/web/fundamentals/web-components/shadowdom#closed - Atav32

Answer 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>

更多信息：

W3：http://www.w3.org/TR/CSS21/generate.html

旧的Stackoverflow答案：哪些元素支持 ::before 和 ::after 伪元素？

- Samuel MacLachlan

---

如果其他人也在想该怎么做，你可以在视频标签后立即添加一个div，同样设置为position:absolute并进行相应的样式设计（例如CSS渐变等），就像这样：https://codepen.io/oscar-jite/pen/OJZVzOo - Jesse Nickles