Pseudo

Pseudo Elements ::before ::after

display: block

div

display: inline (default)

div

<div>

<style>
  div {
    background: pink;
  }
  div, ::before, ::after {
    padding: .75rem;
  }
  .block::before .block::after {
    display: block;
  }
  div::before {
    content: "before";  
    background: var(--lavender);  
  }
  div::after {
    content: "after";
    background: var(--sage);   
    rotate: -3deg;
    translate: 0 -1.1rem;
  }
</style>

document order

<div>
  ::before
  "div"
  ::after
</div> 

equivalent element rendering

<div>
  div
  <before>before</before>
  <after>after</after>
</div> 

stacking order

# z-index
 after: 2
before: 1
   div: 0