CSS only censoring

by NullDev

HTML

<div>
  Test text lorem ipsum 123 <span data-line="ZENSIERT" class="blackening">du darfst das hier nicht sehen</span>.
</div>
<div>
  Test text lorem ipsum 123 <span data-line="ZENSIERT" class="blackening">du darfst das hier nicht sehen</span>.
</div>

CSS

@keyframes blackening{
  0%   { width : 0; }
  100% { width: 100%; }
}

.blackening {
  position: relative;
  text-align: center;
}

.blackening:after {
  content: attr(data-line);
  color: white;
  position: absolute;
  left: 0;
  width: 100%;
  height: 15px;
  background: black;
  animation-name: blackening;
  animation-duration: 3s;
  animation-timing-function: linear;
  animation-iteration-count: 1;
  animation-fill-mode: forwards; 
}