字母i的替代颜色点

Question

我一直在用这个相当愚蠢的想法来挑战。

这样我就可以全部替换“我”出现与Blabla[span class=superI]i[/span]rest：）

我的想法是增加一个额外的（红色）我“背后”真正的我，和剪裁顶掉真正的我。

这甚至可能吗？

Answer 1

另一种解决方案http://jsbin.com/urOtixog/1/edit

此字体大小是可以改变的。

@Fiskolin这是可能的...而且很容易。

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

Answer 2

@ afaelcastrocouto的答案很出色，但它似乎并不适用于所有情况。这不是近乎动态的地方，但您可以调整数字以适应您的需求。

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 3

这是我在呢，实际使用夹子，没有光泽，通过色彩。

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