Explaining the :after & :before selectors

I've read in different blogs and websites like CSS tricks, TutorialsPoint, and Scotch.io the capabilities of the ::after and ::before selectors. They can create ribbons, image overlays, etc. I've read (correct me if I am wrong) that the :before selector inserts at the beginning of a tag, and that the :after selector in the end of tag.

  <div>
<!-- WHERE ::BEFORE GOES -->

<!-- Main Content -->

<!-- WHERE ::AFTER GOES -->
  </div>

Can someone explain the functionality behind this or explain its basic function (if I'm wrong or if I am missing the whole essence of the ::before and ::after selectors)