Search code examples
htmlcssscale

How can I apply css3 scale to an element's first-letter pseudo-element?

I have a paragraph tag with a first-letter pseudo rule. I would like to apply the scale rule to that first letter but it doesn't seem to work.

Does the first-letter pseudo element support css3 scale?

<p>This is some Text</p>
<p>This is some more Text</p>

p:first-child:first-letter { font-family: "Baskerville"; font-size: 60px; -webkit-transform: scaleX(.8); display: inline-block; }
Solution

  • working fine here, you sure you're using Webkit browser to view the results?

    enter image description here

    UPDATE: This DOES work: http://jsfiddle.net/szXHZ/5/

    You have to float the element and you have to set display to block!!

    You will have to mess around with the style a little because it looks a bit ragedy (change line-height for a better look and maybe remove the clear that i've put on the second paragraph), but the transform does work when hovered. You can alter it so that you don't need to hover if you prefer that..