--- title: "Pseudo classes? More like pseudo awesome" url: "https://www.bekk.christmas/post/2019/23/pseudo-classes-more-like-pseudo-awesome" authors: ["Halldis Søhoel"] published: "2019-12-23" updated: "2024-11-07T13:05:28Z" language: "en-US" type: "article" tags: ["CSS"] --- # Pseudo classes? More like pseudo awesome ## In short Pseudo classes let you style elements based on state, such as hover, focus, or checked, while pseudo elements like ::before and ::after can add generated content without changing the markup. The article uses these tools to build an interactive Christmas card where hidden text appears by rotating box-like elements and later by using checkboxes and labels for click interaction. - **For:** Frontend developers working with CSS - **Good to know beforehand:** Basic HTML and CSS _AI-generated_ Pseudo classes are used to select elements of a specific state. The state of an element can either be something that is applied to it by the user, such as hover, or it is based on the element's position in the markup, for example it is the first of its type. We can use pseudo classes to change the styling of some elements based on user interactions. For example, if we want to give the user feedback that an element is clickable, we can use psuedo classes like; `::hover`, `::focus` or `::checked`. Pseudo classes give you the flexibility to add specific styling to certain elements, while still keeping your markup nice and clean. The fun begins when we start using pseudo elements. Pseudo elements are elements that will act as if they were added to your markup. With `::before` and `::after` we can add elements with a specified content. Let’s start with an example. I want to make an interactive Christmas card! To make it more interesting let's hide a secret message using pseudo elements. I start of with a nice Christmas color and some boxes where today's date is written. The secret message is hidden in the html! Can you see it? Now let's hide the message on the page. If we imagine that the date boxes are cubes we can hide the message on the side facing down and turn them around on mouse over. I start off by adding pseudo element to each box using `::after` and position them right below the box. Then I insert the secret message using `attr()`. Now I can fold the pseudo element beneath the box to create the illusion of a cube. I use `transform`to rotate the pseudo element 90 degrees along the X-axis. The boxes will turn on hover. To get the effect of a turning box I rotate the parent element and change the color of the pseudo element to make it look like shadow. I set the transition time to 0.3 seconds. I'm not quite happy with the hover effects. The boxes are turning too quickly and I cannot grasp the secret message. I want the boxes to turn on click. In order to achieve this I have to change the boxes into checkboxes. If I check a checkbox, it will rotate. To style the checkbox to look like the cubes we had before I need to add a label. It is actually the label that will be styled as a box. When we have achieved this we can hide the actual checkbox by setting `width: 0`. Here’s the result. Merry christmas everyone!