Menu
The ::first-line and ::first-letter pseudo-elements, as their names suggest, allow you to style the first letter and first line of an HTML element.
However, I can't find any way to inspect these styles in a browser's developer tools. Other pseudo-elements and pseudo-classes (like ::before, ::after, :first-child, etc) are readily inspectable in dev tools via "Inspect element", but I can't find a way to inspect ::first-letter or ::first-line. Is there a way that I'm missing, or is this not currently possible?
607
In Chrome's Dev tools, the styles of a pseudo-element are visible in the panel: Otherwise, you can also input the following line in the JavaScript console, and inspect the returned CSSStyleDeclaration object: getComputedStyle(document. querySelector('html > body'), ':before');
::first-letter (:first-letter) The ::first-letter CSS pseudo-element applies styles to the first letter of the first line of a block-level element, but only when not preceded by other content (such as images or inline tables).
::before is a generated content element that represents a styleable abstract first child of the respective element. The content inserted using ::before is inserted before other content inside the element and is displayed inline by default. The value of the content is specified using the content property.
::first-line is a pseudo-element used to select the first formatted line in a block-level element (such as a paragraph <p> ).
1. Firefox (64 and Nightly) I was able to easily see both ::first-line and ::first-letter pseudo-elements in the Firefox inspector:
.
You can see those styles in your inspector by expanding the 'pseudo-elements' tab:
2. Chrome (72) I have no trouble seeing it in the Chrome inspector either (applies to both ::first-line and ::first-letter):
Was not able to find the pseudo-element in Safari.
191
In Chrome (74), I see these styles listed all the way at the bottom of the styles list, past the Inherited from blocks:
30
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
