CSS :first-letter not working

by

::first-letter does not work on inline elements such as a span. ::first-letter works on block elements such as a paragraph, table caption, table cell, list item, or those with their display property set to inline-block.

Therefore it’s better to apply ::first-letter to a p instead of a span.

p::first-letter {font-size: 500px;}

or if you want a ::first-letter selector in a span then write it like this:

p b span::first-letter {font-size: 500px !important;}
span {display:block}

MDN provides the rationale for this non-obvious behaviour:

The ::first-letter CSS pseudo-element selects the first letter of the first line of a block, if it is not preceded by any other content (such as images or inline tables) on its line.

…

A first line has only meaning in a block-container box, therefore the ::first-letter pseudo-element has only an effect on elements with a display value of block, inline-block, table-cell, list-item or table-caption. In all other cases, ::first-letter has no effect.

Another odd case(apart from not working on inline items) is if you use :before the :first-letter will apply to the before not the actual first letter see codepen

Examples

References

https://developer.mozilla.org/en-US/docs/Web/CSS/::first-letter
http://reference.sitepoint.com/css/pseudoelement-firstletter

More Related Contents:

  1. How to place elements like this
  2. comma after td entry html [closed]
  3. Vertically align an image inside a div with responsive height
  4. Vertically center two elements within a div [duplicate]
  5. How to keep origin in center of image in scale animation?
  6. Is there a CSS selector for the first direct child only?
  7. set content height 100% jquery mobile
  8. Remove white space above and below large text in an inline-block element
  9. Limit scope of external css to only a specific element?
  10. Why is a div with “display: table-cell;” not affected by margin?
  11. Resource interpreted as stylesheet but transferred with MIME type text/html (seems not related with web server)
  12. How to word wrap text in HTML?
  13. How do I *really* justify a horizontal menu in HTML+CSS?
  14. Use Font Awesome icon as CSS content
  15. Add padding at the beginning and end of each line of text
  16. CSS: Vertically align div when no fixed size of the div is known
  17. Flex item should align left, not center, when it wraps
  18. Why does my Transform snap back?
  19. How to vertically center a Bootstrap carousel-caption?
  20. Dynamically aligning pseudo element according to parent height
  21. Exclude menu item from the collapse of bootstrap 3 navbar
  22. Text Padding in Select Boxes
  23. CSS border color switch animation: “from” color not correct
  24. The border-radius property and border-collapse:collapse don’t mix. How can I use border-radius to create a collapsed table with rounded corners?
  25. Pixelated edge around a CSS Circle with overflow: hidden;
  26. How to change font-family of drop down’s list item?
  27. CSS align images and text on same line
  28. Is there a `pointer-events:hoverOnly` or similar in CSS?
  29. sticky position on css grid items
  30. overflow-y:visible not working when overflow-x:hidden is present [duplicate]

Leave a Comment