Hasta hace no mucho, utilizaba el pseudo elemento :before para listados, para modificar en un elemento LI el como se mostraba un caracter, emoji o cualquier elemento que quisiera usar, incluyendo alguna imagen, pero no había explorado lo suficiente, no había usado :after.
Las posibilidades son lo que la imaginación de, pero por ahora traigo un ejemplo de una composición entre un ícono gráfico (en este caso una imagen en vectores SVG) para generar digamos un botón.
En realidad pues es un SPAN sin nada, con los dos pseudo elementos, uno dibuja el fondo y otro el +. Lo más fácil claro sería generar un ícono así, pero entonces tienes la limitante de tener varios tamaños o generarlo todo en SVG, ahí no habría problema para utilizarlo en la resolución que se desee, pero en este caso ese ícono (la S) la reutizo en varias partes así que me viene bien así como el ejemplo.
No hay mucho que decir, salvo que es cosa de jugar con los elementos CSS para lograr cosas similares, aquí dejo el ejemplo de :before y :after en elementos HTML.
https://panchito-kardashian.tar.mx/media/2021/08/before-after-html-dom2.jpg