The first letter makes Chrome highlight the wrong place.

Question

When I use this CSS code to style the first letter of my text, something strange happens in Chrome:

main p::first-letter { font-size: 300%; } 

 <main> <p> This is some sample text </p> </main> 

When I now, for example, highlight the word "is", the letters "pl" of the word "sample" are highlighted instead. You can check it out here: jsfiddle

To make this clearer, here's what happens:

As you can see, the selected text is in the wrong place.

Is this my mistake or is it a bug in Chrome? How to fix it?

Answer 1

I understood why this is done. This is because of the "return" after <p> .

Therefore, to prevent this behavior, you need to write balise <p> and its contents in one line, for example:

 <p>This is some sample text</p> 

And not that way

 <p> This is some sample text </p> 

I did not find another solution ... Sorry.

Answer 2

The best code for each browser will contain this code.

 <main> <p> <span>T</span>his is some sample text </p> 

 main p span{ font-size: 300%; 

}