what are the purpose of using pseudo element in css

Question

below is the CSS code I put together after a video training, but I\'m yet to under how it works properly.

.hero::before,
.hero::after {
  content: " &quo