Scale Transformation: First Letter in Firefox and IE

Question

I am doing drop-caps for the first letter of a paragraph, using transform: scaleon a pseudo-element :first-letter. It works fine in Chrome, but not in Firefox, although transform: scaleit :first-letterworks in Firefox for itself.

HTML

<p>Lorem ipsum dolar sit amet</p>  

CSS

p:first-letter {
float: left;
margin-left: -36px;
margin-top: 10px;
font-size: 53px;
transform: scale(1,2);
-ms-transform: scale(1,2);
-webkit-transform: scale(1,2);
-moz-transform: scale(1,2);
}

Here is jsfiddle

Answer 1

Apparently, the attempt to transform pseudo :first-lineand :first-letterled to crash Firefox, so it has been disabled . However, it was a long time ago; it might be worth revising in a new bug report.

, CSS, JavaScript, :first-letter:

var p = document.querySelector('p');
var text = p.innerHTML;
p.innerHTML = '<span>' + text.charAt(0) + '</span>' + text.substring(1);

​​