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

Thanks, explains alot. Is there a reason for this? Any documentation? — Nathan Bishop, Dec 30 '14 at 07:01
You could read more about pseudo-elements here ----> http://www.w3.org/TR/2009/CR-CSS2-20090908/generate.html#before-after-content — Weafs.py, Dec 30 '14 at 07:10
To solve your problem you could always add a pseudo-element to the container `div`. — Weafs.py, Dec 30 '14 at 07:10
I was hoping to avoid that as now I have to use a JavaScript solution to transfer the video's "title" attribute to it's parent. — Nathan Bishop, Dec 30 '14 at 07:16
`video` tags have "closed" shadow roots, so you can't modify them with pseudo elements — https://developers.google.com/web/fundamentals/web-components/shadowdom#closed — Atav32, Sep 02 '21 at 04:57

score 39 · Accepted Answer · edited May 23 '17 at 12:32

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?

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

1 Answers1

Linked