CSS first-letter selection highlighting [duplicate]

问题

This question already has answers here:

CSS First Letter Highlighting (2 answers)

Closed 6 years ago.

Is there any way to highlight the first character of an element that has the ::first-letter pseudo-element applied to it?

I'm trying to give the user feedback in regards to a text selection. The text selected is being used for a Twitter plugin and works fine (i.e., the first-letter character is included); however, it doesn't appear as if the text can actually be highlighted.

Here's a link to a CodePen example and here is a screenshot to help demonstrate what I'm talking about:

I attempted to highlight the larger, red "S" but was unable to.

Any help is greatly appreciated and I apologize in advance if this is a duplicate. Thanks!

回答1:

You can do something like this:

p:first-letter {
  float: left;
  font-size: 3em;
  color: #333;
}

<p>This is your paragraph.</p>

I wrote about this a few years ago in an article entitled Styling CSS First-Letter. There are more special case examples there.

来源：https://stackoverflow.com/questions/19649540/css-first-letter-selection-highlighting