Odd behavior of :first-letter in Chrome

Question

Adding what seems to be an innocuous class to an element having a class containing :first-letter causes the first letter, under some circumstances, to be rendered incorrectly. A

Answer 1

You've done nothing wrong. Apparently Chrome has decided that for version 41, it'll screw up repainting the :first-letter pseudo-element (incidentally, Chrome is notorious for repaint bugs). If you declare the "menuitemon" class in the markup, it has no trouble rendering the pseudo-element with the negative margin. It's only when you add it dynamically that it screws up.

Fortunately, unlike the cascade resolution bug that affected Chrome 39 -> 40, I was able to work around this very trivially by using a negative text-indent on the element instead of a negative margin on :first-letter:

p.unindent {
    text-indent: -20px;
    /* ... */
}

/*
p.unindent:first-letter {
    margin-left: -20px;
}
*/

Answer 2

.menutitle {
    /* font-size: 1.2em; */
    font-weight: bold;
    /* font-style: italic; */
    margin-left: 0;
}

the moment i commented those two lines it worked properly

EDIT

nop it only solved half the problem

Codepen

Answer 3

The pseudo element (:first-letter) only works if the parent element is a block container box (in other words, it doesn't work on the first letter of display: inline; elements.)

You must set pseudo's parent to

.parent {display:block}