JSFiddle - React, Tailwind, and code Playground

by Ting-Yuan Chang

HTML

<div id='a'>
  <div id='c'>
    abcccccccccccc
  </div>
</div>
<div id='b'>
<video id="video" width="" height="" loop="loop" autoplay="" controls="none">
  <source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4" />
  <source src="http://www.w3schools.com/html/mov_bbb.ogg" type="video/ogg" />
  Your browser does not support the video tag.
</video>
</div>

CSS

#a, #b {
  width: 300px;
  height: 200px;
  position: relative;
  z-index: -1;
}
#a {
  background: lightblue;
}
#b {
  background: #8888FF;
  top: -200px;
  left: 300px;
}

#c {
  position: absolute;
  left: 250px;
}

#c:before {
  content: attr(content);
  position: absolute;
  left: -600px;
}

JavaScript

$('#c').attr('content', "abc")