<div class="piglatin">
  <span>Pig</span> <span>latin</span> <span>is</span> <span>cool</span>
</div>

<div class="piglatin">
  <span>Hello</span> <span>World</span>
</div>

<div class="piglatin">
  <span>Good</span> <span>luck</span> <span>and</span> <span>happy</span> <span>coding</span>
</div>

.piglatin span {
  display: inline-block;
  position: relative;
  margin-right: 1em;
}

.piglatin span::first-letter {
  float: right;
}

.piglatin span::after {
  content: "ay";
  position: absolute;
  left: 100%;
}