::之前/ ::伪类不工作视频元素 [英] ::before/::after pseudo class not working on video element

问题描述

我希望我的视频元素在播放时在视频上显示标题，问题是：它不起作用。如果我切换<视频>标记到< div>它工作得很好。

我的HTML标记是这样的：

>< div class =player>
< video src =video.mp4poster =video-poster.jpgtitle =Video Name>< / video>
< / div>

我的CSS是这样的：

  .player {
 position：relative; 
 width：852px; 
 height：356px; 
} 
 .player video {
 position：relative; 
 top：0; 
剩下：0; 
 bottom：0; 
 right：0; 
 display：block; 
} 
 .player video :: after {
 content：attr（title）; 
位置：绝对; 
 top：10px; 
 right：15px; 
颜色：#fff; 
 display：block; 
 height：20px; 
 
  

解决方案使用：在< video> 标记之后或：之后不起作用。您也会发现这种情况（不幸的是）使用HTML输入控件（例如文本框）。

这是由于：before code>和：在 psuedo元素之后工作。它们是可以工作的盒式模型对象。像 div ，但是放在里面它们的父元素。就像内容而言，像输入文本框和视频之类的元素不能包含子元素（视频具有src子元素标签但不同）。如果你有HTML：

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

和CSS：



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

呈现的效果将会是：

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

更多信息：

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

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

I would like my video element to show a title over the video while it's playing, the problem is: it doesn't work. If I switch the <video> tag to a <div> it works perfectly fine. What am I doing wrong?

My HTML markup is this:

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

And my CSS is this:

.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;
}

解决方案

Using :before or :after on a <video> tag won't work. You will also find this the case (sadly) with HTML input controls (e.g. textboxes).

This is because of the way :before and :after psuedo elements work. They are box model objects that work e.g. like a div but are placed inside their parent element. Elements like input text boxes and videos cannot contain child elements as far as content is concerned (video has src child tags but that is different).

E.g. if you had HTML:

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

And CSS:

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

The rendered effect will be:

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

More info:

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

Old Stackoverflow answer: Which elements support the ::before and ::after pseudo-elements?

这篇关于::之前/ ::伪类不工作视频元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！