Hide / show lower-case characters

Question

Using just CSS is it possible to hide/select the lowercase characters of a string?

<p>Richard Parnaby-King</p>

To show only RPK?

Using ::first-letter I can show only the letter R. Is there any way to expand on this?

p {
  font-size:0;
}
p::first-letter {
  font-size:16px;
}

<p>Richard Parnaby-King</p>

Edit

The intent is to animate the letters out. i.e. have a css animation that starts as RPK and expands to Richard Parnaby-King on hover.

I am not able to alter the html.

My current thinking is to change the font colour of the p tag to white (on white background), create an :after element with the content "RPK" centred on the p tag and on :hover animate rotate the "RPK" 90 degrees then display:none it (or something so that it is not visible), rotate the p tag to 270 degrees and animate rotate it to finish at 360 degrees. The final effect is "RPK" rotating around and "Richard Parnaby-King" coming out of it. Below I have "sort of" the effect I have described above but it doesn't hide/show the text correctly.

p {
  color: #fff;
  position: relative;
  text-align: center;
}
p:after {
  content: "RPK";
  position: absolute;
  left: 0;
  top: 0;
  color:#000;
  text-align: center;
  width:100%;
}
p:hover {
  animation: pSpin 1s forwards;
}
p:after:rhover {
  animation: pAfterSpin 0.5s forwards;
}
@keyframes pSpin {
  0% {
    transform:rotateY(0deg);
    color:#fff;
  }
  50% {
    color:#000;
    transform:rotateY(270deg);
  }
  100% {
    transform:rotateY(360deg);
    color:#000;
  }
  
}
@keyframes pAfterSpin {
  0% {
    transform:rotateY(0deg);
    color:#000;
  }
  100% {
    transform:rotateY(90deg);
    color:#fff;
    z-index:-5
  }
}

<p>Richard Parnaby-King</p>

Nope. CSS can't select text-nodes and thus it can't style them. — Paulie_D, Jun 16 '15 at 16:11
@AdamBuchananSmith Any special reason to use `PHP` instead of any other server-side language? — emerson.marini, Jun 16 '15 at 16:12
You **might** be able to so something with `unicode-range` but it's a lot of trouble for something that's better left to other avenues of approach. — Paulie_D, Jun 16 '15 at 16:13
PHP seems overkill. JavaScript is all you'd need and would be simple. — Drew Kennedy, Jun 16 '15 at 16:13
Nope, there is a thousand ways to skin a cat. in this case CSS is not one of them, but php is. I just gave a couple of examples of languages that will work, would you like me to list them all? — Adam Buchanan Smith, Jun 16 '15 at 16:15
The intent is to animate the letters out. i.e. have a css animation that starts as `RPK` and expands to `Richard Parnaby-King` on hover. — Richard Parnaby-King, Jun 16 '15 at 16:20
@Richard Parnaby-King: Then you would have to define *hiding* and *expanding* these letters for the purposes of the animation. It is rather difficult to instruct the browser exactly how to animate the text when all you have is an element node containing a text node. This is why CSS alone will not be enough to accomplish the desired effect - you will need JavaScript and perhaps a little bit of DOM mutation. — BoltClock, Jun 16 '15 at 16:21

score 3 · Answer 1 · answered Jun 16 '15 at 16:25

If you change the HTML slightly, you can sort of achieve it. You might have to play around with it a bit more though.

p span {
  font-size:0;
  display: inline-block;
}
p span::first-letter {
  font-size:16px;
}

<p><span>Richard</span> <span>Parnaby-</span><span>King</span></p>

score 0 · Accepted Answer · answered Jun 17 '15 at 12:19

Based on my question I have managed to get this animation working, in which the lower-case text is initially hidden then, on hover, is shown. It is not exactly as I had hoped it to be (I didn't want the text to rotate, but it is close enough).

I am using a series of animations. The first is to rotate the :after content. Once that is complete rotate the whole p tag and animate it's rotation to show the full name.

div {
  padding:1em;
}

p {
  color: #fff;
  position: relative;
  text-align: center;
}
p:after {
  content: "RPK";
  position: absolute;
  left: 0;
  top: 0;
  color:#000;
  text-align: center;
  width:100%;
  
}
div:hover p {
  animation: pSpin 0.5s forwards;
  animation-delay:0.3s;
}
div:hover p:after {
  animation: pAfterSpin 0.5s forwards;
}
@keyframes pSpin {
  0% {
    transform:rotateY(0deg);
    color:#fff;
  }
  51% {
    color:#fff;
    transform:rotateY(270deg);
  }
  52% {
    color:#000;
    transform:rotateY(270deg);
  }
  99% {
    color:#000;
  }
  100% {
    transform:rotateY(360deg);
    color:#000;
  }
  
}
@keyframes pAfterSpin {
  0% {
    transform:rotateY(0deg);
    color:#000;
    z-index:2;
  }
  99% {
    color:#000;
    z-index:2;
  }
  100% {
    transform:rotateY(90deg);
    color:#fff;
    z-index:-5
  }
}

<div>
  <p>Richard Parnaby-King</p>
</div>

Hide / show lower-case characters

Edit

2 Answers2