#pseudo element

Yes I used pseudo ::after. I’ll share some example codes, you can copy them and paste it in this editor to see them live.

You can try to use both ::after and ::before and make one of them as the same color as your box border color, a little bigger and position behind the first pseudo element so it will make a border. 

code

Or you can use one pseudo element and make a square with border, and use transform rotate do rotate it until it’s a pointing arrow. Making only to borders and letting two witouth so will merge with the box background color

code

A CSS pseudo-element is used to style specified parts of an element. For example, it can be used to:

Style the first letter, or line, of an element

Insert content before, or after, the content of an element

Have you ever seen an code similar to this?

#example:before { content:"#"; }

Maybe? The ":before" part? Want to know how that works/what it does? Read this article, it has everything you need to know about pseudo-elements/classes. I'd make a tutorial, but everything is there. If you want something specific, shoot us a message.

This might also be helpful.

The ::selection pseudo-element is a small but exciting component of CSS3. Its function is to simply format user-selected text. While that’s not entirely significant, it is one additional consideration for the web-design perfectionist. It just completes a design for the OCD web designer, like me, even though it will often have little relevance to a common web user.

I use this on my website and even put it into a Tumblr theme I recently designed for Sea Shepherd Advocate. One of my favorite examples is the stark styling of the ::selection pseudo-element on Dribbble.com: