Is it feasible to hide or select only the lowercase characters of a string using CSS?
<p>Richard Parnaby-King</p>
How can I display just RPK?
While ::first-letter allows me to show the letter R, is there a way to go further with this?
p {
font-size:0;
}
p::first-letter {
font-size:16px;
}<p>Richard Parnaby-King</p>Edit
I aim to animate the letters out. For example, having a CSS animation that transitions from RPK to Richard Parnaby-King upon hover.
I cannot modify the HTML structure.
My current approach involves changing the font color of the p tag to white (on a white background), adding an :after element containing "RPK" centered on the p tag, and on :hover, animating the rotation of "RPK" by 90 degrees, then hiding it with display:none (or similar), rotating the p tag by 270 degrees and animating it back to 360 degrees. This creates an effect where "RPK" rotates around as "Richard Parnaby-King" emerges. Below is a rough representation of my described effect, which doesn't handle text visibility 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>