CSS首字母选择突出显示 [英] CSS first-letter selection highlighting

问题描述

是否可以突出显示已应用::first-letter伪元素的元素的第一个字符?

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

我正在尝试向用户提供有关文本选择的反馈.选定的文本已用于Twitter插件，并且可以正常工作(即，包含第一个字母字符 )；但是，它似乎并不能真正突出显示文本.

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.

这里是 CodePen示例的链接，下面是一个屏幕截图，可帮助演示我的操作.我在谈论:

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

我试图突出显示较大的红色"S"，但无法突出显示.

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!

推荐答案

您可以执行以下操作:

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

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

几年前，我在一篇名为样式CSS首字母.那里有更多特殊情况的例子.

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

这篇关于CSS首字母选择突出显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！