::之前/ ::僞類不工作視頻元素

我希望我的視頻元素在視頻播放時顯示標題，問題是：它不起作用。如果我將<視頻>標記切換爲<div>它工作得很好。我究竟做錯了什麼？::之前/ ::僞類不工作視頻元素

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

來源

2014-12-30 Nathan Bishop

你不能添加：僞元素到'video'標籤。 –

謝謝，解釋很多。是否有一個原因？任何文檔？ –

你可以在這裏閱讀更多關於僞元素----> http://www.w3.org/TR/2009/CR-CSS2-20090908/generate.html#before-after-content –

在<video>標籤使用:before或:after將無法正常工作。您還會發現這種情況（令人遺憾）使用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>

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

來源

2014-12-30 08:07:31

::之前/ ::僞類不工作視頻元素

回答

相關問題