#pseudo element

[todorokiscute]

Correct me if i'm wrong, but you used pseudo elements to make the arrow on your github page, right? But how did you make with borders?

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

Altough I’m used to use the first method first, the second is more cute and less blurry. 

[help-with-coding]

Pseudo-elements/classes

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.

xoxo, Angela

[avdhootrohan]

Html selector Like Pseudo element, Attribute selector and Combining selector Html provides you elements to customize and stylize your content.A Tutorial with examples html selectors.

[markwyner]

CSS3 ::Selection Pseudo-Element

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:

This is a less-than-important element in web design. But it does satisfy the compulsive web-designer’s need to strive for perfection.