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 i

Answer 1

@afaelcastrocouto's answer is brilliant, but it doesn't seem to work in all cases. This is no where near as dynamic, but you can adjust the numbers to fit your need.

Live demo (click).

<p>Here is an unusual <span class="red-i">i</span>.</p>

CSS:

p {
  font-size: 50px;
}

.red-i {
  font-size: 50px;
  position: relative;
}

.red-i:before {
  content: '';
  display: inline;
  background: red;

  /* dot size */
  height: .12em;
  width: .13em;

  /* roundness */
  border-radius:.12em;

  /* position */
  position: absolute;
  top: .2em;
  left: .05em;
}

Answer 2

Here's my go at it, actually using clip, with no shine-through color.

jsFiddle

HTML:

spec<span class="special"><i>i</i></span>al

CSS:

.special {
    position: relative;
    display: inline-block;
}
.special:before,
.special:after {
    opacity: 1;
    content: 'i';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    font: inherit;
}
/* The 0.35 might have to be adjusted for other fonts. */
.special:before {
    color: #ff5500;
    clip: rect(auto, auto, 0.35em, auto);
}
.special:after {
    clip: rect(0.35em, auto, auto, auto);
}
.special i {
    font: inherit;
    opacity: 0;
}

Answer 3

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;
}