CSS Pseudo Elements
Last Updated Jul 21, 2015, 12:00:06 PM
CSS Pseudo Elements
Just like pseudo-classes, pseudo-elements are added to selectors but instead of describing a special state, they allow you to style certain parts of a document. For example, the ::first-line pseudo-element targets only the first line of an element specified by the selector.
A pseudo-class starts with a colon (:). No whitespace may appear between a type selector or universal selector and the colon, nor can whitespace appear after the colon.
Syntax
Note: ::selection always starts with double colons (::).
CSS pseudo-elements
::afterIt will add the "website" as a text to the end of a paragraph
Try It Now::before
It will add the "My favorite website is" as a text before the paragraph
Try It Now::first-letter
It will add the "My favorite website is" as a text before the paragraph
Try It Now::first-line Try It Now
Browser compatibility
| Feature | |||||||
|---|---|---|---|---|---|---|---|
| Basic support | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) |
All CSS pseudo elements
| Selector | Example | description | Try It |
|---|---|---|---|
| ::after | p:after | It inserts content after every <p>element. | Try It |
| ::before | p:before | It inserts content before every <p>element. | Try It |
| ::first-letter | p::first-letter | It selects the first letter of every <p> element. | Try It |
| ::first-line | p::first-line | It selects the first line of every <p> element | Try It |
CSS Pseudo Classes
Sources and Credits
The source of the content has been referred and updated with Mozilla Foundation and W3C Organization
Last Updated Jul 21, 2015, 12:00:06 PM