::before/::after pseudo class not working on video element

Question

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

Answer 1

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?