第一个字母使Chrome在错误的地方突出显示

Question

当我使用这个CSScode来设置我的文字的第一个字母时,Chrome中出现了一些奇怪的事情:

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

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

例如,当我现在突出显示单词'is'时,单词'sample'的字母'pl'会突出显示.你可以在这里测试一下:jsfiddle

为了更清楚,这是发生的事情:

如您所见,突出显示的文本位置错误.

这是我的错误还是Chrome中的错误？我如何解决它？

Answer 1

适用于每个浏览器的最佳代码将显示此代码

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

main p span{
font-size: 300%;

}