re: Daily Challenge #22 - Simple Pig Latin VIEW POST


CSS (kind of)

Separate the words in <span>s, and add the class "piglatin" to the container.

.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%;

The idea is based on floating the first letter to the right using the pseudo-class :first-letter, and then adding "ay" using the pseudo-element ::after... although it doesn't work well with punctuation :-/

You can see a demo running on CodePen:


Screen readers still read the sentences right, even when visually they are in pig latin.


So happy to see another CSS solution! It's been awhile lol

Hell of a job!


Yes. The last ones have been impossible. But 4-5 out of 22 is not that bad :P

code of conduct - report abuse