<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%;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.