Uncommon Use Cases for Pseudo Elements

ishadeed.com ishadeed.com3 years ago in #Dev Love170

Pseudo-elements are in use for a long time. However, there are some uses cases that I feel they are not entirely known across developers. I wrote down this article to shed light on them so they can be used more. Parent-child Hover Effect Since the pseudo-element belongs to its parent element, there are some unusual use cases for that. For now, let’s explore a straightforward example to demonstrate what I mean. The design has a section title, with a little circle on the left side of it. When we hover on the section title, the circle gets bigger. .section-title:before { content: “”; width: 20px; height: 20px; background: blue; /* Other styles */ } .section-title:hover:before { transform: scale(1.2); } Easy and straightforward. Let’s extend that concept to more useful use cases. Projects/Blog Section On my website, I have a section that lists all of my projects. I wanted to add a thumbnail for each project, but it wasn’t a top priority thing for me. What’s more important to me is the link itself. I first saw this effect a while ago on Ethan Marcotte website. The above design mockup shows the idea that I wanted to apply. Each colored link in the paragraph has a pseudo-element paired with it. <section class=“hero”> <p>Hello, my name is Ahmad. I’m a UX Designer and Front End Developer that enjoys the intersection between design and code. I write on <a href=“www.ishadeed.com” class=“link-1”>ishadeed.com</a> and <a href=“www.a11ymatters.com” class=“link-2”>a11ymatters.com</a> on CSS, UX Design and Web Accessibility.</p> </section> 1) I added padding to the hero I want to reserve space for the pseudo-elements, so adding padding is a solution for that. 2) Position the pseudo-elements absolutely To position them absolutely, I need to define which parent is the relative one. It should be added to the hero section. Notice in the below GIF how removing position: relative from the .hero section affects the pseudo-elements. 3) Adding pseudo-elements The final step is to add the pseudo-elements along with their hover effects. Here is how I did it: .link-1 { color: #854FBB; } @media (min-width: 700px) { .link-1:after { content: “”; position: absolute; right: 0; top: 20px; width: 150px; height: 100px; background: currentColor; opacity: 0.85; transition: 0.3s ease-out; } .link-1:hover { text-decoration: underline; } .link-1:hover:after { transform: scale(1.2); opacity: 1; } } Notice that I’ve used currentColor for the pseudo-element background. If you don’t know about this keyword, it inherits from the color value of its parent. So at any point, I want to change the colors of the links, it’s easy to change them only once. See the Pen Pseudo-elements: Example 1 by Ahmad Shadeed (@shadeed)on CodePen. If you are curious, go to the home page of my website and check the “My Projects” section. I have used the above technique. Increasing the clickable area size By adding a pseudo-element to a link, the clickable area around it will get bigger. This is very useful and will enhance the experience for the user. Let’s take an example: Moreover, it can be used to extend the clickable area of a card component, which has a view more link. I wrote a detailed article about that topic. Overlays Let’s suppose that there is an element with a background image, and the design has a gradient overlay with blending mode set to color. Pseudo-elements can help with that! .hero { position: relative; height: 300px; background: url(“image.jpg”) center/cover; } .hero:after { content: “”; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-image: linear-gradient(180deg, #851717 0%, #30328C 100%); mix-blend-mode: color; } See the Pen Pseudo-elements: Example 2 by Ahmad Shadeed (@shadeed)on CodePen. Wrapped…

Like to keep reading?

This article first appeared on ishadeed.com. If you'd like to keep reading, follow the white rabbit.

View Full Article

Leave a Reply