Todas las cajas son un section (color azul) que contienen un div padre (borde rojo), con un div hijo interior (border green). Las cajas beforebegin, afterbegin, afterend y beforeend se general por JS.
Texto en el html para beforebegin
Texto en el html para afterbegin
Texto en el html para afterend
Texto en el html para beforeend