Note the double-colon ::before<\/code> versus the single-colon :before<\/code>. Which one is correct?<\/p>\n

Technically, the correct answer is ::before<\/code>. But that doesn’t mean you should automatically use it.<\/p>\n

<\/p>\n

The situation is that:<\/p>\n

\n
• double-colon selectors are pseudo-elements.<\/li>\n
• single-colon selectors are pseudo-selectors.<\/li>\n<\/ul>\n

  ::before<\/code> is definitely a pseudo-element, so it should use the double colon. <\/p>\n

  The distinction between a pseudo-element and pseudo-selector is already confusing. Fortunately, ::after<\/code> and ::before<\/code> are fairly straightforward. They literally add something new to the page, an element.<\/p>\n

  But something like ::first-letter<\/code> 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 <span><\/code> 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)<\/code> or whatever.<\/p>\n

  Even though ::before<\/code> is a pseudo-element and a double-colon is the correct way to use pseudo-elements, should<\/em> you? <\/p>\n

  There is an argument that perhaps you should use :before<\/code>, which goes like this:<\/p>\n

  \n
  1. Internet Explorer 8 and below only supported :before<\/code>, not ::before<\/code><\/li>\n
  2. All modern browsers support it both ways, since tons of sites use :before<\/code> and browsers really value backwards compatibility.<\/li>\n
  3. Hey it’s one less character as a bonus.<\/li>\n<\/ol>\n

     I’ve heard people say that they have a CSS linter that requires (or automates) them to be single-colon. Personally, I’m OK with people doing that. Seems fine. I’d value consistency over which way you choose to go.<\/p>\n

     On the flip side, there’s an argument for going with ::before<\/code> that goes like this:<\/p>\n

     \n
     1. Single-colon pseudo-elements were a mistake. There will never be any more pseudo-elements with a single-colon.<\/li>\n
     2. If you have the distinction straight in your mind, might as well train your fingers to do it right.<\/li>\n
     3. This is already confusing enough, so let’s just follow the correctly specced way.<\/li>\n<\/ol>\n

        I’ve got my linter set up to force me to do double-colons. I don’t support Internet Explorer 8 anyway and it feels good to be doing things the “right” way.<\/p>\n","protected":false},"excerpt":{"rendered":"

        Note the double-colon ::before versus the single-colon :before. Which one is correct? Technically, the correct answer is ::before. But that […]<\/p>\n","protected":false},"author":3,"featured_media":275542,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","_share_on_mastodon":"0","_share_on_mastodon_status":"%title% %permalink%"},"categories":[4],"tags":[1154],"class_list":["post-275382","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-articles","tag-pseudo-elements"],"acf":{"show_toc":"No"},"share_on_mastodon":{"url":"","error":""},"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/08\/before-pseudo-colons.jpg?fit=1200%2C600&ssl=1","jetpack-related-posts":[],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/275382","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=275382"}],"version-history":[{"count":10,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/275382\/revisions"}],"predecessor-version":[{"id":275774,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/275382\/revisions\/275774"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/275542"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=275382"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=275382"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=275382"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}