How do I use a css pseudo element?
-
Pseudo element defines a specific style of part of an element.
Note:
Pseudo class defines the special state of an element.The HTML code for this example is just a heading.
... <h1>This fine day!</h1> ...
The CSS code for a pseudo element to a html heading,
first-letter
... h1::first-letter { font-size: 50px; font-style: italic; color: greenyellow } ...
The result is:
Pseudo element defines a specific style of part of an element.Note:
Pseudo class defines the special state of an element.The HTML code for this example is just a heading.
... <h1>This fine day!</h1> ...
The CSS code for a pseudo element to a html heading,
first-letter
... h1::first-letter { font-size: 50px; font-style: italic; color: greenyellow } ...
The result is:
Pseudo element defines a specific style of part of an element.Note:
Pseudo class defines the special state of an element.The HTML code for this example is just a heading.
... <h1>This fine day!</h1> ...
The CSS code for a pseudo element to a html heading,
first-letter
... h1::first-letter { font-size: 50px; font-style: italic; color: greenyellow } ...
The result is:
For a list of other pseudo elements with examples see this link: https://www.w3schools.com/css/css_pseudo_elements.asp
© Lightnetics 2024