CSS Before and After pseudo elements explained - part three: as design elements

Exploring how to use ::before and ::after to create some fun design elements without any extra markup.

The before and after pseudo elements are great, since they let us add in content without any extra markup. This makes them perfect for adding in design flourishes, since we can do it without creating empty divs.

---

---

---

I'm on some other places on the internet too!

If you'd like a behind the scenes and previews of what's coming up on my YouTube channel, make sure to follow me on Instagram and Twitter.

[rakunn]

Amazing. I watched all 3 parts and immediately solved 6 issues at my job. Instant subscribe ;-)

[konraddariuszwoloszyn]

As always, Your videos are the top level of professionalism combined with great explanation and a healthy dose of humor. Great job!

[fersahahmet]

At last I found someone who really knows css and what he is doing. Not mimics some code learnt from some where else. Mr. Powell you ARE a pro. And thank you so much for all the effort putting these video series together

[tontonsan]

As a beginner, no online course was really explaining what you could do with ::before and ::after and I always thought "I'll get back to it later". Well, I finally took the plunge after your video appeared in my recommended autoplay after watching another tutorial, and I just had to leave a comment because you explain so well, and it is now so easy for me and I feel like you taught me in 1hour what several days of school would have. Thank you and you got a new subscriber :)!

[MVIVN]

I'm still very, very early in my front-end journey but watching stuff like this blows my mind! I can't wait until I get to a point where I am implementing stuff like this into my sites!

[dyllanmccreary]

Wow. Watching this series i expected to only learn about ::before and ::after pseudo elements. not only did i learn that but you helped me fix a few issues i was stuck on. thanks guy, great videos.

[philkewley]

I had an idea replace a blocky looking footer section with a simple text based section, but that meant finding a way to separate content without using background colours or images - I've watched this video so many times over the years without fully understanding how I could use it. And now today when I needed inspiration and direction I remembered it! So I follow everything on the video and place a 50% height before & after behind h3 text, set the after color to transparent, reduce the height to 50%, give it a 3px border-top and push it down using vh, until I've basically got a horizontal rule with the brand name nicely centred. I even managed to place it all in a centred container so it only takes up 90% width. It looks a lot better than that messy description - Honestly I can't thank you enough for sharing so much knowledge, your teaching keeps me going forwards. Thank you

[joeldcanfield_spinhead]

Another excellent explanation. I think the reason this isn't used much is because it's all a bit abstract until you see examples. I suspect that as we all get more familiar and see more examples, there'll be ongoing creative use of pseudo elements like this.

[riyazahamed]

Wow, ::before watching this video i assumed that i know something about css, but ::after i realized i am doing css in a wrong way, Thank you Sir (immediately subscribed )

[amysheeter]

You're the best. Just finished this series, and I was trying to do something similar to this on a website I am currently working on but could NOT figure out how to make it look good. This answered all my questions. Thank you for your amazing work!

[sravant]

Your channel deserve 10 million subscribers.
Thanks for all the videos Kevin.

[seemsas]

I am more of the backend guy but your videos makes me more and more interested in frontend coding. Thank you!

[adityads]

Watched all 3 videos that were part of the series. Great content! I can confidently say that I understand ::before and ::after, so much better than before. Thank you so much!!!

[octavian]

Wow!! Watching these videos is like having your mind opened to a new CSS multiverse where anything is possible.

[ilhambagirov]

Ohh God. Finally i found someone who could explain me what these elements do. Thanks a lot for giving this valuable knowledge to us. 👍🙏

[justinpayne]

Thank you so much! After watching this series I now know how to make those little notification bubbles YouTube has telling how many new videos you have and like facebook uses for new posts and such.

[MrTanguero]

Loved all three parts of the series and that link you shared also has some amazing ideas! Thanks a lot, Kevin!

[santiagocalvo]

im learning CSS and your channel is the BEST!!! thnx a lot!!!

[nerozone]

Your videos are great. I just watch any video you have randomly and find a solution to a problem I have in a design. Like in this video, I didn't realise I had to go set box-sizing on before and after psuedo elements.

I was wondering why a psuedo element I had wasn't quite lining up the way I expected. Thanks!

[jeffjarvis]

I enjoy your videos. A super-easy way to style the .intro class "Generic Heading" is with grid using grid-template-columns: 1fr auto 1fr. (I learned this by watching your videos about grid, heh). Add a small grid-gap for white space around the text. Now the ::before and ::after elements just need background color and you're done! Keep up the excellent work, Kevin.