Change color of dots in "i"?

Question

Is there a way to create text in the following image just using css / html (or any other means)? In fact, any dots in any "i" should have a different color.

Ideally, I want this to be entered via Wordpress WYSIWYG (as the client can enter whatever they want) as H2.

At first I would try to do something, but I don’t even know where to start!

Answer 1

I did it, but it’s very difficult to position it!

.logo { position: absolute; top: 20px; } .white { } #blue { top: 5px; color: blue; -moz-transform: scale(1, -1); -webkit-transform: scale(1, -1); -o-transform: scale(1, -1); -ms-transform: scale(1, -1); transform: scale(1, -1); z-index: 3; } #black { z-index: 1; } #white-blue { width: 200px; background: white; position: absolute; height: 20px; top: 28px; z-index: 2; } #white-black { z-index: 4; width: 200px; background: white; position: absolute; height: 20px; top: 24px; } 

 <div id="white-blue"></div> <h2 class="logo" id="blue">re-imagine</h2> <div id="white-black"></div> <h2 class="logo" id="black">re-imagine</h2>