Select Page

Category: pseudo elements

Valid CSS Content

There is a content property in CSS that’s made to use in tandem with the ::before and ::after pseudo elements. It injects content into the element. Here’s an example: .email::before { content: attr(data-done) " Email: "; /* This gets inserted before the email address */ } The property generally takes anything you drop in there. However, there are some invalid values it won’t accept. I heard from someone recently who was confused by this, so I had a little play with it myself and learned a few things. This works fine: /* Valid */ ::after { content: "1";...

Read More

::before vs :before

Note the double-colon ::before versus the single-colon :before. Which one is correct? Technically, the correct answer is ::before. But that doesn’t mean you should automatically use it. The situation is that: double-colon selectors are pseudo-elements. single-colon selectors are pseudo-selectors. ::before is definitely a pseudo-element, so it should use the double colon. The distinction between a pseudo-element and pseudo-selector is already confusing. Fortunately, ::after and ::before are fairly straightforward. They literally add something new to the page, an element. But something like ::first-letter is also a pseudo-element. The way I reason that out in my brain is that it’s selecting a part of something in which there is no existing HTML element for. There is no around that first letter you’re targeting, so that first letter is almost like a new element you’re adding on the page. That differs from pseudo-selectors which are selecting things that already exist, like the :nth-child(2) or whatever. Even though ::before is a pseudo-element and a double-colon is the correct way to use pseudo-elements, should you? There is an argument that perhaps you should use :before, which goes like this: Internet Explorer 8 and below only supported :before, not ::before All modern browsers support it both ways, since tons of sites use :before and browsers really value backwards compatibility. Hey it’s one less character as a bonus. I’ve heard people say that they have a...

Read More

Solved with CSS! Logical Styling Based on the Number of Given Elements

This post is the third in a series about the power of CSS. Article Series: Colorizing SVG Backgrounds Dropdown Menus Logical Styling Based On the Number of Given Elements (this post) Did you know that CSS is Turing complete? Did you know that you can use it to do some pretty serious logical styling? Well you can! You don’t have to set all of your logic-based styling rules in JavaScript, or even have to use JavaScript to set classes you are styling against. In many cases, CSS can handle that itself. I’m still discovering new CSS tricks everyday, and...

Read More