Direct link to the article A Little Reminder That Pseudo Elements are Children, Kinda.

A Little Reminder That Pseudo Elements are Children, Kinda.

Here’s a container with some child elements:

<div class="container">
  <div>item</div>
  <div>item</div>
  <div>item</div>
</div>

If I do:

.container::before {
  content: "x"
}

I’m essentially doing:

<div class="container">
  [[[ ::before psuedo-element here ]]]
  <div>item</div>
  <div>item</div>
  <div>item</div>
</div>

Which will behave just like …

Avatar of Chris Coyier
Chris Coyier on (Updated on )