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

JS manipulation

pseudoelements are playing hard to get

Get the styles of pseudoelements with JS

  • Js has better solutions than jQuery
  • pseudoelements can be read with getComputedStyle

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

Style pseudoelements with JS

  • Js has better solutions than jQuery
  • pseudoelements can be styled with insertRule(rule, rulesIndex)

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

Examples from every slide:

https://codepen.io/collection/XvJmMY/

So what is the big deal with pseudoelements?

  • pseudoelements insert the content that is not present in DOM
  • more dynamic markup
  • plenty of cool tricks

Scss libraries made only with after and before

Other cool stuff from the internet

Demo time

content with attr()

  • attr returns value of the attribute in an element
  • we can do string interpolations in CSS 😍

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

HAML&SCSS enhanced with pseudoelements

Pure CSS github graph with contributions

https://codepen.io/tonkec/full/orpKMa

Thank you for coming

.meetup::after {
    content: "beer";
}