CSS Pseudoelements

Made with ♡ by

Antonija Šimić

::before

::after

::first-line

::first-character

https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements#Index_of_standard_pseudo-elements

We're going to look at these pseudoelements

double vs single colon?

CSS3 distinguishes pseudoelements and pseudoclasses

::double-colon for pseudoelements

:single colon for pseudoclasses

Learn more about pseudoclasses here

.link:hover {
  /* pseudoclass */
  background-color: #bada55;
}

.link::after {
  /* pseudoelement */
  content: "*_*";
}

a magic keyword added to a selector
a virtual element that is not really in the DOM
accessibility problem
one element can only have one pseudoelement

What are they?

they style some part of the selected element
they inject virtual element to the DOM
we can do lots of tricks with them

What do they do?

add double colon to the selector

How do we use them?

.header::before {
    content: "Before the header";
    font-size: 2rem;
}

.header::after {
    content: "After the header";
    font-size: 2rem;
}

.title::first-character {
    color: #292929;
    font-size: 3rem;
}

.title::first-line {
   background-color: blue;
}

::first-line

selects the first line in the block-level element
doesn't add a new element to the DOM (selects the parts of an existing element)
can only have some properties
responsive
doesn't work with display:inline

https://codepen.io/tonkec/pen/pXreVO

https://codepen.io/tonkec/pen/ZdJKXY

First line example (responsive):

First line with different display values

::first-letter

selects the first letter in the element
doesn't add a new element to the DOM (selects the parts of an existing element)
can only have some properties, mostly related to fonts
doesn't work with inline elements

https://codepen.io/tonkec/pen/NZvgWK

https://codepen.io/tonkec/pen/pXrwgy

First letter:

First letter and display property

::after

injected element after the selected element
will not be shown if there is no content property
not accessible => screen readers will not see the after and before
can have any CSS property

https://codepen.io/tonkec/pen/OejgzJ

::before

injected element before the selected element
will not be shown if there is no content property
not accessible => screen readers will not see the after and before

https://codepen.io/tonkec/pen/KjvqeW

::after and ::before

not all elements can have ::after and ::before
elements that are replaced in the DOM can not have pseudoelements
- image
- iframe, video, audio
- input, textarea, select

https://developer.mozilla.org/en-US/docs/Web/CSS/Replaced_element

Example: https://codepen.io/tonkec/pen/EBvXOR

Blog post: https://codepen.io/tonkec/post/pseudoelements-don-t-really-work-with-inline-elements-or-do-they