Alternate color dot over the letter i

Question

I've been challenged with this rather silly idea.

So can I replace all "i" occurrences with Blabla[span class=superI]i[/span]rest : )

My idea is adding an extra (red) i "behind" the real i, and clipping the top off the real i.

Is this even possible ?

Answer 1

Another solution http://jsbin.com/urOtixog/1/edit

This font-size can be changed.

@Fiskolin It is possible ... and quite easy.

<p>th<span class="i">i</span>s</p>

CSS

p {
  font-size: 165px;
}
.i {  
  color: red;
  position: relative;
}
.i:before {
  content: "ı";
  position: absolute; 
  color: black;
}