What’s the point of the ::before and ::after pseudo-element selectors in CSS?

I have used CSS pseudo-element selectors like many others, mainly just to say I've used them.

But I am racking my brain and struggling to come up with a reason for their place alongside markup.

Take the following example:

<p>Hello</p>

p::after {
   content: "*";
}

What is the advantage of using this over using <span> tags?

Am I missing the point of ::before and ::after? Is there some rock solid reason for using them over pre-existing semantic markup?