Question

我希望我的视频元素在视频播放时显示标题，问题是：它不起作用。如果我切换＆lt; video＆gt;标记为＆lt; div＆gt;它工作得很好。我做错了什么？

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

Answer 1

在:before代码上使用:after或<video>无效。你也会发现这种情况（遗憾的是）有HTML输入控件（例如文本框）。

这是因为:before和:after psuedo元素的工作方式。它们是有效的盒子模型对象，例如就像div一样，但是将放在的父元素中。就内容而言，输入文本框和视频等元素不能包含子元素（视频具有src子标记但不同）。

E.g。如果你有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

Old Stackoverflow回答：Which elements support the ::before and ::after pseudo-elements?

::之前/ ::之后伪类不能处理视频元素

1 个答案: