JSFiddle - React, Tailwind, and code Playground

HTML

<div class="ce_text forward block"><div class="fill_bottom"></div>

  
      <p><a href="" target="_blank"><strong>Headline</strong>Test Test test test<span>Lesen Sie mehr</span></a></p>  
  
  
</div>

CSS

.ce_text.forward {
position: relative;
overflow: hidden;
padding: 20px;
background-color: #F8F8F8;
color: #2d353c;
}
.ce_text.forward p {
position: relative;
}
.ce_text.forward .fill_bottom {
width: 500px;
height: 500px;
bottom: 0;
left: -865px;
position: absolute;
margin: auto;
background-color: #ecedee;
top: 0px;
right: 0;
transition: left 0.3s linear 0s;
transform: rotate(45deg);
}
.ce_text.forward:hover .fill_bottom {
left: 0;
}