How to skew the background of a text?

Question

I'm looking for a simple way to skew only the background of a text like shown on the image below.

Answer 1

this way ?

p {
  font-size   : 32px;
  font-family : Arial, Helvetica, sans-serif;
}
span {
  position : relative;
  }
span::before {
  content          : "";
  position         : absolute;
  height           : 80%;
  width            : 120%;
  background-color : lightgreen;
  left             : -10%;
  top              : 10%;
  transform        : rotate( -10deg );  
  z-index          : -1;
  transform-origin : center center;
  }

<p>How to achieve <span>this</span><br>using css</p>