DEV Community

Discussion on: Daily Challenge #1 - String Peeler

Collapse
 
alvaromontoro profile image
Alvaro Montoro • Edited

CSS

Just add the class removeFirstAndLastLetter to a tag, and see the first and last letter "removed" from the text 😋

.removeFirstAndLastLetter {
  background: #fff;
  font-family: monospace;
  white-space: nowrap;
  position: relative;
  display: inline-block;
}

.removeFirstAndLastLetter::before,
.removeFirstAndLastLetter::after {
  content: "\00a0";
  background: #fff;
  top: 0;
  display: block;
  position: absolute;
  height: 100%;
  width: auto;
}

.removeFirstAndLastLetter::after {
  right: 0;
}
Enter fullscreen mode Exit fullscreen mode

And as an extra, it can be stylized and animated, so you can see the letters fade out:

Collapse
 
ben profile image
Ben Halpern

Ha! This one is great.

Collapse
 
alvaromontoro profile image
Alvaro Montoro

Thanks :)