Posted by Daniel Pfeiffer on 06/07/07 22:16

On http://makepp.sourceforge.net/1.50/ i try to make the first four letters of
makepp (Perl-ish) blue, so as to match the logo a little. What succeeds
nicely is this:

<i><span class="makepp">make</span>pp</i>

The drawback is that Google doesn't count this as one word, and hence rates
this page lower than other pages (like the outdated
makepp.sourceforge.net/1.19/), containing just "makepp" :-( So I want to do
this like

<i class="makepp">makepp</i>

such that the word is there even without CSS. Ideally I'd like

.makepp:first-letter(4) { color: #0090e0; }

For apparent lack of such a feature I tried nested class application:

.hide { display: none; }
.ucmakepp:before { content: "Make"; color: #0090e0; }
.makepp:before { content: "make"; color: #0090e0; }
.ucmakepp:after, .makepp:after { content: "pp"; }

<i class="ucmakepp"><span class="hide">Makepp</span></i>
<i class="makepp"><span class="hide">makepp</span></i>

This works nicely, but it's very cludgy, and Google might still notice I'm
hiding the word.

The cleanest approach seems a reverse overlap:

.makepp { color: #0090e0; }
.makepp:after { content: "pp"; color: black; position: relative; z-index:
1; left: -2em; }

But it varies with browsers, neither relative nor absolute work well, and I
seem to have to move back whatever the width of "pp" may be (certainly less
than 2em), rather than being able to say "keep the right edge here".

Is there any portable simple way of solving this?

thanks -- Daniel

[Back to original message]