6

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:

enter image description here

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!

5
  • 1
    @doublewire its working in your link. Oct 29, 2013 at 4:18
  • 1
    It definitely works for me on Firefox.
    – BoltClock
    Oct 29, 2013 at 4:18
  • 1
    It seems to be a problem with WebKit, as both Chrome and Safari fail as the post describes. Oct 29, 2013 at 4:24
  • Is there anything WebKit can get right?
    – BoltClock
    Oct 29, 2013 at 4:37
  • 1
    Thanks guys (@Rex @BoltClock). Unfortunately (for this situation) WebKit is high priority. Oct 29, 2013 at 4:49

1 Answer 1

-2

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.

2
  • 1
    How does any of that address the problem given in the question? Have you looked in the test case that was linked?
    – BoltClock
    Oct 29, 2013 at 4:34
  • 1
    Thanks, but floating the pseudo-element doesn't seem to help with the text selection problem. Oct 29, 2013 at 4:51

Not the answer you're looking for? Browse other questions tagged or ask your own question.