Craig Rodrigues!

Changing the color of the last letter of a word using only CSS

My last name is spelled differently than what people usually expect. People expect it to be spelled Rodriguez which is the Spanish spelling of my last name. However, my last name is Portuguese and spelt Rodrigues. So when I was designing my business card I wanted to bring attention to the S, so I changed the color of the S to be red against the rest of the name which is colored black.

business-card.png

I created my website and this blog using Squarespace. I didn’t want to reinvent the wheel, and Squarespace is incredibly easy to setup and use. I can write blog posts in markdown, my website is responsive on all devices, SSL is included, and it has built-in SEO and AMP. If I need slightly more control I can add custom themes or CSS.

Anyway, one thing I wanted to do here was to create the same colored S effect for the title of my website. However, the problem here is that I have control over the exactly text in the HTML, but cannot control the individual elements, classes or id’s of the HTML elements!

This poses an interesting problem, how can you change the color of the last letter of a word using only CSS? 🤔

Normally with access to the underlying HTML you could just wrap the last letter in a <span> tag and add styling to that element.

<p>Hello, Worl<span class="last-letter">d</span></p>

With no access to the underlying HTML what can be done though? I discovered a solution, and it's a total hack.

It can be achieved using only CSS using an ::after pseudo-element without requiring any changes in the HTML. What does the ::after pseudo-element do? The ::after selector inserts something after the content of each selected element. You can use the "content" property to insert your content.

.title::after { 
  content: "s";
}

After using the ::after on my site title this is what the result looked like. That’s not quite what I wanted though.

last-letter-fail.png

Okay, so we can use the transform property and translate method and move the content in the ::after to the left to overlap the last letter!

.title::after {
  content: 's';
  color: red;
  position: absolute;
  transform: translate(-100%, 0);
}

And now you can see the final result in my title above! Of course this means that the red S overlays the original black S. To mask this hack I increased the font weight a bit and bam, acceptable result achieved! 

A Method for Solving Whiteboard Problems

The Sieve of Eratosthenes in JavaScript