{"id":14158,"date":"2011-09-06T19:51:23","date_gmt":"2011-09-07T02:51:23","guid":{"rendered":"http:\/\/css-tricks.com\/?page_id=14158"},"modified":"2022-09-30T12:06:53","modified_gmt":"2022-09-30T19:06:53","slug":"after-and-before","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/almanac\/selectors\/a\/after-and-before\/","title":{"rendered":"::before \/ ::after"},"content":{"rendered":"\n<p>The <code>::before<\/code> and <code>::after<\/code> pseudo-elements in CSS allows you to insert content onto a page without it needing to be in the HTML. While the end result is not actually in the DOM, it appears on the page as if it is, and would essentially be like this:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">div::before {\n  content: \"before\";\n}\ndiv::after {\n  content: \"after\";\n}<\/code><\/pre>\n\n\n\n<pre rel=\"HTML\" class=\"wp-block-csstricks-code-block language-markup\" data-line=\"\"><code markup=\"tt\">&lt;div>\n  before\n  &lt;!-- Rest of stuff inside the div -->\n  after\n&lt;\/div><\/code><\/pre>\n\n\n\n<p>The only reasons to use one over the other are:<\/p>\n\n\n\n<ul><li>You want the generated content to come before the element content, positionally.<\/li><li>The <code>::after<\/code> content is also &#8220;after&#8221; in source-order, so it will position on top of ::before if stacked on top of each other naturally.<\/li><\/ul>\n\n\n\n<p>Note that the content is still <em>inside<\/em> the element they are applied to. The naming sort of feels like they might come, ya know, before or after the element, but it&#8217;s really before or after <em>the other content inside<\/em>.<\/p>\n\n\n\n<p>The value for content can be:<\/p>\n\n\n\n<ul><li><strong>A string:<\/strong> <code>content: \"a string\";<\/code> \u2014 special characters need to be specially encoded as a unicode entity. See the <a href=https://css-tricks.com/"https:////css-tricks.com//snippets//html//glyphs///">glyphs page<\/a>.<\/li><li><strong>An image:<\/strong> <code>content: url(\/path\/to\/image.jpg);<\/code> \u2014 The image is inserted at it&#8217;s exact dimensions and <a href=https://css-tricks.com/"https:////codepen.io//team//css-tricks//pen//gBaaGo/" rel=\"noopener\">cannot be resized.<\/a> Since things like <a href=https://css-tricks.com/"https:////css-tricks.com//css3-gradients///">gradients<\/a> are actually images, a pseudo element can be a gradient.<\/li><li><strong>Nothing:<\/strong> <code>content: \"\";<\/code> \u2014 Useful for <a href=https://css-tricks.com/"https:////css-tricks.com//clearfix-a-lesson-in-web-development-evolution///">clearfixes<\/a> and inserting images as a <code>background-image<\/code> (set <code>width<\/code> and <code>height<\/code>, and can even resize with <code>background-size<\/code>).<\/li><li><strong>A counter:<\/strong> <code>content: counter(li);<\/code> \u2014 Really useful for <a href=https://css-tricks.com/"http:////www.456bereastreet.com//archive//201105//styling_ordered_list_numbers///" rel=\"noopener\">styling lists<\/a> (but we also have <code><a href=https://css-tricks.com/"https:////css-tricks.com//almanac//selectors//m//marker///">::marker<\/a><\/code> for that).<\/li><li><strong>A line break:<\/strong> <code>content: \"Killing \\A Me \\A Softly\";<\/code> \u2014 Great for when <a href=https://css-tricks.com/"https:////www.digitalocean.com//community//tutorials//css-line-break-content-property?utm_medium=content_acq&amp;utm_source=css-tricks&amp;utm_campaign=&amp;utm_content=awareness_bestsellers\%22 rel=\"noopener\">you really need one<\/a>.<\/li><\/ul>\n\n\n\n<p>Note that you <a href=https://css-tricks.com/"https:////www.digitalocean.com//community//tutorials//css-html-entities-content-property?utm_medium=content_acq&amp;utm_source=css-tricks&amp;utm_campaign=&amp;utm_content=awareness_bestsellers\%22 rel=\"noopener\">can insert HTML entities in the <code>content<\/code> property<\/a>, but no dice as far as them rendering or anything like that.<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">content: \"&lt;h1>I will not render as a Heading 1&lt;\/h1>\";<\/code><\/pre>\n\n\n<h3 class=\"wp-block-heading\" id=\"vs\"><code>:<\/code> vs <code>::<\/code><\/h3>\n\n\n<p>Every browser that supports the double colon (<code>::<\/code>) CSS3 syntax also supports just the (<code>:<\/code>) syntax, but Internet Explorer (IE) 8 only supports the single-colon, so for now, it&#8217;s recommended to just use the single-colon for best browser support.<\/p>\n\n\n\n<p><code>::<\/code> is the newer format intended to distinguish pseudo content from pseudo-selectors. If you don&#8217;t need IE 8 support, feel free to use the double-colon.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"browser-support\">Browser support<\/h3>\n\n<div class=\"caniuse\"><div class=\"caniuse-header\"><p>This browser support data is from <a href=https://css-tricks.com/"http:////caniuse.com//#feat=css-gencontent\" rel=\"noopener\">Caniuse<\/a>, which has more detail. A number indicates that browser supports the feature at that version and up.<\/p><\/div><div class=\"caniuse-section\"><h4>Desktop<\/h4><table class=\"browser-support-table\"><thead><tr><th class=\"chrome\"><span>Chrome<\/span><\/th><th class=\"firefox\"><span>Firefox<\/span><\/th><th class=\"ie\"><span>IE<\/span><\/th><th class=\"edge\"><span>Edge<\/span><\/th><th class=\"safari\"><span>Safari<\/span><\/th><\/tr><\/thead><tbody><tr><td class=\"y yep\" title=\"Chrome - \"><span class=\"caniuse-agents-version version\">4<\/span><\/td><td class=\"y yep\" title=\"Firefox - \"><span class=\"caniuse-agents-version version\">2<\/span><\/td><td class=\"y yep\" title=\"IE - \"><span class=\"caniuse-agents-version version\">9<\/span><\/td><td class=\"y yep\" title=\"Edge - \"><span class=\"caniuse-agents-version version\">12<\/span><\/td><td class=\"y yep\" title=\"Safari - \"><span class=\"caniuse-agents-version version\">3.1<\/span><\/td><\/tr><\/table><\/div><div class=\"caniuse-section\"><h4>Mobile \/ Tablet<\/h4><table class=\"browser-support-table\"><thead><tr><th class=\"and_chr\"><span>Android Chrome<\/span><\/th><th class=\"and_ff\"><span>Android Firefox<\/span><\/th><th class=\"android\"><span>Android<\/span><\/th><th class=\"ios_saf\"><span>iOS Safari<\/span><\/th><\/tr><\/thead><tbody><tr><td class=\"y yep\" title=\"Android Chrome - \"><span class=\"caniuse-agents-version version\">126<\/span><\/td><td class=\"y yep\" title=\"Android Firefox - \"><span class=\"caniuse-agents-version version\">127<\/span><\/td><td class=\"y yep\" title=\"Android - \"><span class=\"caniuse-agents-version version\">2.1<\/span><\/td><td class=\"y yep\" title=\"iOS Safari - \"><span class=\"caniuse-agents-version version\">3.2<\/span><\/td><\/tr><\/table><\/div><\/div>\n\n\n<h3 class=\"wp-block-heading\" id=\"tricks-that-use-before-and-after\">Tricks that use <code>::before<\/code> and <code>after<\/code><\/h3>\n\n\n    \t\t\n    <div class=\"in-article-cards\">\n      <article class=\"in-article-card articles\" id=\"mini-post-14158\">\n\n  <time datetime=\"2021-09-21\" title=\"Originally published Sep 6, 2011\">\n    <strong>\n                \n        Article\n      <\/strong>\n\n    on\n\n    Sep 21, 2021  <\/time>\n\n  <h3>\n    <a href=https://css-tricks.com/"https:////css-tricks.com//7-practical-uses-for-the-before-and-after-pseudo-elements-in-css///">\n      7 Practical Uses for the ::before and ::after Pseudo-Elements in CSS    <\/a>\n  <\/h3>\n\n  \n      <div class=\"tags\">\n      <a href=https://css-tricks.com/"https:////css-tricks.com//tag//psuedo-elements///" rel=\"tag\">psuedo elements<\/a>    <\/div>\n  \n  <div class=\"author-row\">\n    <a href=https://css-tricks.com/"https:////css-tricks.com//author//habdulhazeez///" aria-label=\"Author page of Habdul Hazeez\">\n      <img loading=\"lazy\" decoding=\"async\" alt=\"\" class=\"avatar avatar-80 photo avatar-default\" height=\"80\" src=https://css-tricks.com/"https:////i0.wp.com//css-tricks.com//wp-content//uploads//2021//09//KnTxmgs6_400x400.jpg?resize=80%2C80&amp;ssl=1\%22 width=\"80\"  data-recalc-dims=\"1\">    <\/a>\n  \n    <a class=\"author-name\" href=https://css-tricks.com/"https:////css-tricks.com//author//habdulhazeez///">\n      Habdul Hazeez    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"in-article-card articles\" id=\"mini-post-14158\">\n\n  <time datetime=\"2018-06-05\" title=\"Originally published Sep 6, 2011\">\n    <strong>\n                \n        Article\n      <\/strong>\n\n    on\n\n    Sep 29, 2018  <\/time>\n\n  <h3>\n    <a href=https://css-tricks.com/"https:////css-tricks.com//1-element-css-rainbow-gradient-infinity///">\n      1 Element CSS Rainbow Gradient Infinity    <\/a>\n  <\/h3>\n\n  \n      <div class=\"tags\">\n      <a href=https://css-tricks.com/"https:////css-tricks.com//tag//psuedo-elements///" rel=\"tag\">psuedo elements<\/a>    <\/div>\n  \n  <div class=\"author-row\">\n    <a href=https://css-tricks.com/"https:////css-tricks.com//author//thebabydino///" aria-label=\"Author page of Ana Tudor\">\n      <img alt='' src='https:////secure.gravatar.com//avatar//bee436794e066a5423040cf673c7506f?s=80&amp;d=retro&amp;r=pg' srcset='https:\/\/secure.gravatar.com\/avatar\/bee436794e066a5423040cf673c7506f?s=160&#038;d=retro&#038;r=pg 2x' class='avatar avatar-80 photo' height='80' width='80' \/>    <\/a>\n  \n    <a class=\"author-name\" href=https://css-tricks.com/"https:////css-tricks.com//author//thebabydino///">\n      Ana Tudor    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"in-article-card articles\" id=\"mini-post-14158\">\n\n  <time datetime=\"2022-05-25\" title=\"Originally published Sep 6, 2011\">\n    <strong>\n                \n        Article\n      <\/strong>\n\n    on\n\n    May 25, 2022  <\/time>\n\n  <h3>\n    <a href=https://css-tricks.com/"https:////css-tricks.com//a-perfect-table-of-contents-with-html-css///">\n      A Perfect Table of Contents With HTML + CSS    <\/a>\n  <\/h3>\n\n  \n      <div class=\"tags\">\n      <a href=https://css-tricks.com/"https:////css-tricks.com//tag//psuedo-elements///" rel=\"tag\">psuedo elements<\/a>    <\/div>\n  \n  <div class=\"author-row\">\n    <a href=https://css-tricks.com/"https:////css-tricks.com//author//nicholaszakas///" aria-label=\"Author page of Nicholas C. Zakas\">\n      <img loading=\"lazy\" decoding=\"async\" alt=\"\" class=\"avatar avatar-80 photo avatar-default\" height=\"80\" src=https://css-tricks.com/"https:////i0.wp.com//css-tricks.com//wp-content//uploads//2022//05//me-150x150-1.jpg?resize=80%2C80&amp;ssl=1\%22 width=\"80\"  data-recalc-dims=\"1\">    <\/a>\n  \n    <a class=\"author-name\" href=https://css-tricks.com/"https:////css-tricks.com//author//nicholaszakas///">\n      Nicholas C. Zakas    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"in-article-card articles\" id=\"mini-post-14158\">\n\n  <time datetime=\"2017-05-31\" title=\"Originally published Sep 6, 2011\">\n    <strong>\n                \n        Article\n      <\/strong>\n\n    on\n\n    May 31, 2017  <\/time>\n\n  <h3>\n    <a href=https://css-tricks.com/"https:////css-tricks.com//animating-single-div-art///">\n      Animating Single Div Art    <\/a>\n  <\/h3>\n\n  \n      <div class=\"tags\">\n      <a href=https://css-tricks.com/"https:////css-tricks.com//tag//psuedo-elements///" rel=\"tag\">psuedo elements<\/a>    <\/div>\n  \n  <div class=\"author-row\">\n    <a href=https://css-tricks.com/"https:////css-tricks.com//author//dancwilson///" aria-label=\"Author page of Dan Wilson\">\n      <img alt='' src='https:////secure.gravatar.com//avatar//5f4f5f5767f27047cdac0892bf94bd24?s=80&amp;d=retro&amp;r=pg' srcset='https:\/\/secure.gravatar.com\/avatar\/5f4f5f5767f27047cdac0892bf94bd24?s=160&#038;d=retro&#038;r=pg 2x' class='avatar avatar-80 photo' height='80' width='80' \/>    <\/a>\n  \n    <a class=\"author-name\" href=https://css-tricks.com/"https:////css-tricks.com//author//dancwilson///">\n      Dan Wilson    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"in-article-card articles\" id=\"mini-post-14158\">\n\n  <time datetime=\"2021-05-06\" title=\"Originally published Sep 6, 2011\">\n    <strong>\n                \n        Article\n      <\/strong>\n\n    on\n\n    May 6, 2021  <\/time>\n\n  <h3>\n    <a href=https://css-tricks.com/"https:////css-tricks.com//custom-state-pseudo-classes-in-chrome///">\n      Custom State Pseudo-Classes in Chrome    <\/a>\n  <\/h3>\n\n  \n      <div class=\"tags\">\n      <a href=https://css-tricks.com/"https:////css-tricks.com//tag//psuedo-elements///" rel=\"tag\">psuedo elements<\/a>    <\/div>\n  \n  <div class=\"author-row\">\n    <a href=https://css-tricks.com/"https:////css-tricks.com//author//simevidas///" aria-label=\"Author page of \u0160ime Vidas\">\n      <img alt='' src='https:////secure.gravatar.com//avatar//a9db2cbc6d4e589aec2d25f67771b85e?s=80&amp;d=retro&amp;r=pg' srcset='https:\/\/secure.gravatar.com\/avatar\/a9db2cbc6d4e589aec2d25f67771b85e?s=160&#038;d=retro&#038;r=pg 2x' class='avatar avatar-80 photo' height='80' width='80' \/>    <\/a>\n  \n    <a class=\"author-name\" href=https://css-tricks.com/"https:////css-tricks.com//author//simevidas///">\n      \u0160ime Vidas    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"in-article-card notes\" id=\"mini-post-14158\">\n\n  <time datetime=\"2021-08-30\" title=\"Originally published Sep 6, 2011\">\n    <strong>\n                \n        Article\n      <\/strong>\n\n    on\n\n    Sep 27, 2021  <\/time>\n\n  <h3>\n    <a href=https://css-tricks.com/"https:////css-tricks.com//css-pseudo-commas///">\n      CSS Pseudo Commas    <\/a>\n  <\/h3>\n\n  \n      <div class=\"tags\">\n      <a href=https://css-tricks.com/"https:////css-tricks.com//tag//psuedo-elements///" rel=\"tag\">psuedo elements<\/a>    <\/div>\n  \n  <div class=\"author-row\">\n    <a href=https://css-tricks.com/"https:////css-tricks.com//author//geoffgraham///" aria-label=\"Author page of Geoff Graham\">\n      <img alt='' src='https:////secure.gravatar.com//avatar//1a1b5ca4b139c0c8caaea26ef437d943?s=80&amp;d=retro&amp;r=pg' srcset='https:\/\/secure.gravatar.com\/avatar\/1a1b5ca4b139c0c8caaea26ef437d943?s=160&#038;d=retro&#038;r=pg 2x' class='avatar avatar-80 photo' height='80' width='80' \/>    <\/a>\n  \n    <a class=\"author-name\" href=https://css-tricks.com/"https:////css-tricks.com//author//geoffgraham///">\n      Geoff Graham    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"in-article-card articles\" id=\"mini-post-14158\">\n\n  <time datetime=\"2021-01-12\" title=\"Originally published Sep 6, 2011\">\n    <strong>\n                \n        Article\n      <\/strong>\n\n    on\n\n    Jan 12, 2021  <\/time>\n\n  <h3>\n    <a href=https://css-tricks.com/"https:////css-tricks.com//how-to-add-commas-between-a-list-of-items-dynamically-with-css///">\n      How to Add Commas Between a List of Items Dynamically with CSS    <\/a>\n  <\/h3>\n\n  \n      <div class=\"tags\">\n      <a href=https://css-tricks.com/"https:////css-tricks.com//tag//psuedo-elements///" rel=\"tag\">psuedo elements<\/a>    <\/div>\n  \n  <div class=\"author-row\">\n    <a href=https://css-tricks.com/"https:////css-tricks.com//author//daveseidman///" aria-label=\"Author page of Dave Seidman\">\n      <img alt='' src='https:////secure.gravatar.com//avatar//24b4528124b5923d2619c223f858b577?s=80&amp;d=retro&amp;r=pg' srcset='https:\/\/secure.gravatar.com\/avatar\/24b4528124b5923d2619c223f858b577?s=160&#038;d=retro&#038;r=pg 2x' class='avatar avatar-80 photo' height='80' width='80' \/>    <\/a>\n  \n    <a class=\"author-name\" href=https://css-tricks.com/"https:////css-tricks.com//author//daveseidman///">\n      Dave Seidman    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"in-article-card articles\" id=\"mini-post-14158\">\n\n  <time datetime=\"2022-02-09\" title=\"Originally published Sep 6, 2011\">\n    <strong>\n                \n        Article\n      <\/strong>\n\n    on\n\n    Feb 9, 2022  <\/time>\n\n  <h3>\n    <a href=https://css-tricks.com/"https:////css-tricks.com//css-slanted-containers///">\n      How to Make CSS Slanted Containers    <\/a>\n  <\/h3>\n\n  \n      <div class=\"tags\">\n      <a href=https://css-tricks.com/"https:////css-tricks.com//tag//psuedo-elements///" rel=\"tag\">psuedo elements<\/a>    <\/div>\n  \n  <div class=\"author-row\">\n    <a href=https://css-tricks.com/"https:////css-tricks.com//author//daveseidman///" aria-label=\"Author page of Dave Seidman\">\n      <img alt='' src='https:////secure.gravatar.com//avatar//24b4528124b5923d2619c223f858b577?s=80&amp;d=retro&amp;r=pg' srcset='https:\/\/secure.gravatar.com\/avatar\/24b4528124b5923d2619c223f858b577?s=160&#038;d=retro&#038;r=pg 2x' class='avatar avatar-80 photo' height='80' width='80' \/>    <\/a>\n  \n    <a class=\"author-name\" href=https://css-tricks.com/"https:////css-tricks.com//author//daveseidman///">\n      Dave Seidman    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"in-article-card articles\" id=\"mini-post-14158\">\n\n  <time datetime=\"2022-03-02\" title=\"Originally published Sep 6, 2011\">\n    <strong>\n                \n        Article\n      <\/strong>\n\n    on\n\n    Mar 2, 2022  <\/time>\n\n  <h3>\n    <a href=https://css-tricks.com/"https:////css-tricks.com//css-raise-the-curtains-effect///">\n      How to Make a \u201cRaise the Curtains\u201d Effect in CSS    <\/a>\n  <\/h3>\n\n  \n      <div class=\"tags\">\n      <a href=https://css-tricks.com/"https:////css-tricks.com//tag//psuedo-elements///" rel=\"tag\">psuedo elements<\/a>    <\/div>\n  \n  <div class=\"author-row\">\n    <a href=https://css-tricks.com/"https:////css-tricks.com//author//silvestar///" aria-label=\"Author page of Silvestar Bistrovi\u0107\">\n      <img loading=\"lazy\" decoding=\"async\" alt=\"\" class=\"avatar avatar-80 photo avatar-default\" height=\"80\" src=https://css-tricks.com/"https:////i0.wp.com//css-tricks.com//wp-content//uploads//2021//03//avatar-1024.jpg?resize=80%2C80&amp;ssl=1\%22 width=\"80\"  data-recalc-dims=\"1\">    <\/a>\n  \n    <a class=\"author-name\" href=https://css-tricks.com/"https:////css-tricks.com//author//silvestar///">\n      Silvestar Bistrovi\u0107    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"in-article-card articles\" id=\"mini-post-14158\">\n\n  <time datetime=\"2020-04-07\" title=\"Originally published Sep 6, 2011\">\n    <strong>\n                \n        Article\n      <\/strong>\n\n    on\n\n    Apr 7, 2020  <\/time>\n\n  <h3>\n    <a href=https://css-tricks.com/"https:////css-tricks.com//how-to-re-create-a-nifty-netflix-animation-in-css///">\n      How to Re-Create a Nifty Netflix Animation in CSS    <\/a>\n  <\/h3>\n\n  \n      <div class=\"tags\">\n      <a href=https://css-tricks.com/"https:////css-tricks.com//tag//psuedo-elements///" rel=\"tag\">psuedo elements<\/a>    <\/div>\n  \n  <div class=\"author-row\">\n    <a href=https://css-tricks.com/"https:////css-tricks.com//author//chrisgeelhoed///" aria-label=\"Author page of Chris Geelhoed\">\n      <img alt='' src='https:////secure.gravatar.com//avatar//198ca0afaecca805a9f0a26dc8c7f85c?s=80&amp;d=retro&amp;r=pg' srcset='https:\/\/secure.gravatar.com\/avatar\/198ca0afaecca805a9f0a26dc8c7f85c?s=160&#038;d=retro&#038;r=pg 2x' class='avatar avatar-80 photo' height='80' width='80' \/>    <\/a>\n  \n    <a class=\"author-name\" href=https://css-tricks.com/"https:////css-tricks.com//author//chrisgeelhoed///">\n      Chris Geelhoed    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"in-article-card articles\" id=\"mini-post-14158\">\n\n  <time datetime=\"2020-10-12\" title=\"Originally published Sep 6, 2011\">\n    <strong>\n                \n        Article\n      <\/strong>\n\n    on\n\n    Oct 14, 2020  <\/time>\n\n  <h3>\n    <a href=https://css-tricks.com/"https:////css-tricks.com//how-to-recreate-the-ripple-effect-of-material-design-buttons///">\n      How to Recreate the Ripple Effect of Material Design Buttons    <\/a>\n  <\/h3>\n\n  \n      <div class=\"tags\">\n      <a href=https://css-tricks.com/"https:////css-tricks.com//tag//psuedo-elements///" rel=\"tag\">psuedo elements<\/a>    <\/div>\n  \n  <div class=\"author-row\">\n    <a href=https://css-tricks.com/"https:////css-tricks.com//author//bretcameron///" aria-label=\"Author page of Bret Cameron\">\n      <img alt='' src='https:////secure.gravatar.com//avatar//7355c1f508466500bc258fe22045aca0?s=80&amp;d=retro&amp;r=pg' srcset='https:\/\/secure.gravatar.com\/avatar\/7355c1f508466500bc258fe22045aca0?s=160&#038;d=retro&#038;r=pg 2x' class='avatar avatar-80 photo' height='80' width='80' \/>    <\/a>\n  \n    <a class=\"author-name\" href=https://css-tricks.com/"https:////css-tricks.com//author//bretcameron///">\n      Bret Cameron    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"in-article-card articles\" id=\"mini-post-14158\">\n\n  <time datetime=\"2016-05-24\" title=\"Originally published Sep 6, 2011\">\n    <strong>\n                \n        Article\n      <\/strong>\n\n    on\n\n    Mar 14, 2018  <\/time>\n\n  <h3>\n    <a href=https://css-tricks.com/"https:////css-tricks.com//injecting-line-break///">\n      Injecting a Line Break    <\/a>\n  <\/h3>\n\n  \n      <div class=\"tags\">\n      <a href=https://css-tricks.com/"https:////css-tricks.com//tag//psuedo-elements///" rel=\"tag\">psuedo elements<\/a>    <\/div>\n  \n  <div class=\"author-row\">\n    <a href=https://css-tricks.com/"https:////css-tricks.com//author//chriscoyier///" aria-label=\"Author page of Chris Coyier\">\n      <img alt='' src='https:////secure.gravatar.com//avatar//8081b26e05bb4354f7d65ffc34cbbd67?s=80&amp;d=retro&amp;r=pg' srcset='https:\/\/secure.gravatar.com\/avatar\/8081b26e05bb4354f7d65ffc34cbbd67?s=160&#038;d=retro&#038;r=pg 2x' class='avatar avatar-80 photo' height='80' width='80' \/>    <\/a>\n  \n    <a class=\"author-name\" href=https://css-tricks.com/"https:////css-tricks.com//author//chriscoyier///">\n      Chris Coyier    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"in-article-card articles\" id=\"mini-post-14158\">\n\n  <time datetime=\"2022-07-28\" title=\"Originally published Sep 6, 2011\">\n    <strong>\n                \n        Article\n      <\/strong>\n\n    on\n\n    Jul 28, 2022  <\/time>\n\n  <h3>\n    <a href=https://css-tricks.com/"https:////css-tricks.com//recreating-mdns-truncated-text-effect///">\n      Recreating MDN&#8217;s Truncated Text Effect    <\/a>\n  <\/h3>\n\n  \n      <div class=\"tags\">\n      <a href=https://css-tricks.com/"https:////css-tricks.com//tag//psuedo-elements///" rel=\"tag\">psuedo elements<\/a>    <\/div>\n  \n  <div class=\"author-row\">\n    <a href=https://css-tricks.com/"https:////css-tricks.com//author//geoffgraham///" aria-label=\"Author page of Geoff Graham\">\n      <img alt='' src='https:////secure.gravatar.com//avatar//1a1b5ca4b139c0c8caaea26ef437d943?s=80&amp;d=retro&amp;r=pg' srcset='https:\/\/secure.gravatar.com\/avatar\/1a1b5ca4b139c0c8caaea26ef437d943?s=160&#038;d=retro&#038;r=pg 2x' class='avatar avatar-80 photo' height='80' width='80' \/>    <\/a>\n  \n    <a class=\"author-name\" href=https://css-tricks.com/"https:////css-tricks.com//author//geoffgraham///">\n      Geoff Graham    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"in-article-card articles\" id=\"mini-post-14158\">\n\n  <time datetime=\"2022-06-17\" title=\"Originally published Sep 6, 2011\">\n    <strong>\n                \n        Article\n      <\/strong>\n\n    on\n\n    Feb 15, 2024  <\/time>\n\n  <h3>\n    <a href=https://css-tricks.com/"https:////css-tricks.com//single-element-loaders-the-dots///">\n      Single Element Loaders: The Dots    <\/a>\n  <\/h3>\n\n  \n      <div class=\"tags\">\n      <a href=https://css-tricks.com/"https:////css-tricks.com//tag//psuedo-elements///" rel=\"tag\">psuedo elements<\/a>    <\/div>\n  \n  <div class=\"author-row\">\n    <a href=https://css-tricks.com/"https:////css-tricks.com//author//afiftemani///" aria-label=\"Author page of Temani Afif\">\n      <img alt='' src='https:////secure.gravatar.com//avatar//2c12e74c8162614e08a31d704ed9e193?s=80&amp;d=retro&amp;r=pg' srcset='https:\/\/secure.gravatar.com\/avatar\/2c12e74c8162614e08a31d704ed9e193?s=160&#038;d=retro&#038;r=pg 2x' class='avatar avatar-80 photo' height='80' width='80' \/>    <\/a>\n  \n    <a class=\"author-name\" href=https://css-tricks.com/"https:////css-tricks.com//author//afiftemani///">\n      Temani Afif    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"in-article-card articles\" id=\"mini-post-14158\">\n\n  <time datetime=\"2022-06-10\" title=\"Originally published Sep 6, 2011\">\n    <strong>\n                \n        Article\n      <\/strong>\n\n    on\n\n    Aug 27, 2023  <\/time>\n\n  <h3>\n    <a href=https://css-tricks.com/"https:////css-tricks.com//single-element-loaders-the-spinner///">\n      Single Element Loaders: The Spinner    <\/a>\n  <\/h3>\n\n  \n      <div class=\"tags\">\n      <a href=https://css-tricks.com/"https:////css-tricks.com//tag//psuedo-elements///" rel=\"tag\">psuedo elements<\/a>    <\/div>\n  \n  <div class=\"author-row\">\n    <a href=https://css-tricks.com/"https:////css-tricks.com//author//afiftemani///" aria-label=\"Author page of Temani Afif\">\n      <img alt='' src='https:////secure.gravatar.com//avatar//2c12e74c8162614e08a31d704ed9e193?s=80&amp;d=retro&amp;r=pg' srcset='https:\/\/secure.gravatar.com\/avatar\/2c12e74c8162614e08a31d704ed9e193?s=160&#038;d=retro&#038;r=pg 2x' class='avatar avatar-80 photo' height='80' width='80' \/>    <\/a>\n  \n    <a class=\"author-name\" href=https://css-tricks.com/"https:////css-tricks.com//author//afiftemani///">\n      Temani Afif    <\/a>\n  <\/div>\n\n<\/article>\n    <\/div>\n  \n\n\n<h3 class=\"wp-block-heading\" id=\"more-information\">More information<\/h3>\n\n\n    \t\t\n    <div class=\"in-article-cards\">\n      <article class=\"in-article-card articles\" id=\"mini-post-14158\">\n\n  <time datetime=\"2018-08-23\" title=\"Originally published Sep 6, 2011\">\n    <strong>\n                \n        Article\n      <\/strong>\n\n    on\n\n    Aug 29, 2018  <\/time>\n\n  <h3>\n    <a href=https://css-tricks.com/"https:////css-tricks.com//to-double-colon-or-not-do-double-colon///">\n      ::before vs :before    <\/a>\n  <\/h3>\n\n  \n      <div class=\"tags\">\n      <a href=https://css-tricks.com/"https:////css-tricks.com//tag//psuedo-elements///" rel=\"tag\">psuedo elements<\/a>    <\/div>\n  \n  <div class=\"author-row\">\n    <a href=https://css-tricks.com/"https:////css-tricks.com//author//chriscoyier///" aria-label=\"Author page of Chris Coyier\">\n      <img alt='' src='https:////secure.gravatar.com//avatar//8081b26e05bb4354f7d65ffc34cbbd67?s=80&amp;d=retro&amp;r=pg' srcset='https:\/\/secure.gravatar.com\/avatar\/8081b26e05bb4354f7d65ffc34cbbd67?s=160&#038;d=retro&#038;r=pg 2x' class='avatar avatar-80 photo' height='80' width='80' \/>    <\/a>\n  \n    <a class=\"author-name\" href=https://css-tricks.com/"https:////css-tricks.com//author//chriscoyier///">\n      Chris Coyier    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"in-article-card articles\" id=\"mini-post-14158\">\n\n  <time datetime=\"2010-03-17\" title=\"Originally published Sep 6, 2011\">\n    <strong>\n                \n        Article\n      <\/strong>\n\n    on\n\n    Feb 4, 2022  <\/time>\n\n  <h3>\n    <a href=https://css-tricks.com/"https:////css-tricks.com//pseudo-class-selectors///">\n      Meet the Pseudo Class\u00a0Selectors    <\/a>\n  <\/h3>\n\n  \n      <div class=\"tags\">\n      <a href=https://css-tricks.com/"https:////css-tricks.com//tag//psuedo-elements///" rel=\"tag\">psuedo elements<\/a>    <\/div>\n  \n  <div class=\"author-row\">\n    <a href=https://css-tricks.com/"https:////css-tricks.com//author//chriscoyier///" aria-label=\"Author page of Chris Coyier\">\n      <img alt='' src='https:////secure.gravatar.com//avatar//8081b26e05bb4354f7d65ffc34cbbd67?s=80&amp;d=retro&amp;r=pg' srcset='https:\/\/secure.gravatar.com\/avatar\/8081b26e05bb4354f7d65ffc34cbbd67?s=160&#038;d=retro&#038;r=pg 2x' class='avatar avatar-80 photo' height='80' width='80' \/>    <\/a>\n  \n    <a class=\"author-name\" href=https://css-tricks.com/"https:////css-tricks.com//author//chriscoyier///">\n      Chris Coyier    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"in-article-card \" id=\"mini-post-14158\">\n\n  <time datetime=\"2011-01-19\" title=\"Originally published Sep 6, 2011\">\n    <strong>\n                \n      Video\n      <\/strong>\n\n    on\n\n    Feb 25, 2015  <\/time>\n\n  <h3>\n    <a href=https://css-tricks.com/"https:////css-tricks.com//videos//94-intro-to-pseudo-elements///">\n      #94: Intro to Pseudo Elements    <\/a>\n  <\/h3>\n\n      <time>\u25b6 Running Time: <span>18:37<\/span><\/time>\n  \n      <div class=\"tags\">\n      <a href=https://css-tricks.com/"https:////css-tricks.com//tag//psuedo-elements///" rel=\"tag\">psuedo elements<\/a>    <\/div>\n  \n  <div class=\"author-row\">\n    <a href=https://css-tricks.com/"https:////css-tricks.com//author//chriscoyier///" aria-label=\"Author page of Chris Coyier\">\n      <img alt='' src='https:////secure.gravatar.com//avatar//8081b26e05bb4354f7d65ffc34cbbd67?s=80&amp;d=retro&amp;r=pg' srcset='https:\/\/secure.gravatar.com\/avatar\/8081b26e05bb4354f7d65ffc34cbbd67?s=160&#038;d=retro&#038;r=pg 2x' class='avatar avatar-80 photo' height='80' width='80' \/>    <\/a>\n  \n    <a class=\"author-name\" href=https://css-tricks.com/"https:////css-tricks.com//author//chriscoyier///">\n      Chris Coyier    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"in-article-card articles\" id=\"mini-post-14158\">\n\n  <time datetime=\"2011-06-13\" title=\"Originally published Sep 6, 2011\">\n    <strong>\n                \n        Article\n      <\/strong>\n\n    on\n\n    Aug 19, 2021  <\/time>\n\n  <h3>\n    <a href=https://css-tricks.com/"https:////css-tricks.com//pseudo-element-roundup///">\n      A Whole Bunch of Amazing Stuff Pseudo Elements Can Do    <\/a>\n  <\/h3>\n\n  \n      <div class=\"tags\">\n      <a href=https://css-tricks.com/"https:////css-tricks.com//tag//psuedo-elements///" rel=\"tag\">psuedo elements<\/a>    <\/div>\n  \n  <div class=\"author-row\">\n    <a href=https://css-tricks.com/"https:////css-tricks.com//author//chriscoyier///" aria-label=\"Author page of Chris Coyier\">\n      <img alt='' src='https:////secure.gravatar.com//avatar//8081b26e05bb4354f7d65ffc34cbbd67?s=80&amp;d=retro&amp;r=pg' srcset='https:\/\/secure.gravatar.com\/avatar\/8081b26e05bb4354f7d65ffc34cbbd67?s=160&#038;d=retro&#038;r=pg 2x' class='avatar avatar-80 photo' height='80' width='80' \/>    <\/a>\n  \n    <a class=\"author-name\" href=https://css-tricks.com/"https:////css-tricks.com//author//chriscoyier///">\n      Chris Coyier    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"in-article-card articles\" id=\"mini-post-14158\">\n\n  <time datetime=\"2019-07-08\" title=\"Originally published Sep 6, 2011\">\n    <strong>\n                \n        Article\n      <\/strong>\n\n    on\n\n    Jul 9, 2019  <\/time>\n\n  <h3>\n    <a href=https://css-tricks.com/"https:////css-tricks.com//a-little-reminder-that-pseudo-elements-are-children-kinda///">\n      A Little Reminder That Pseudo Elements are Children, Kinda.    <\/a>\n  <\/h3>\n\n  \n      <div class=\"tags\">\n      <a href=https://css-tricks.com/"https:////css-tricks.com//tag//psuedo-elements///" rel=\"tag\">psuedo elements<\/a>    <\/div>\n  \n  <div class=\"author-row\">\n    <a href=https://css-tricks.com/"https:////css-tricks.com//author//chriscoyier///" aria-label=\"Author page of Chris Coyier\">\n      <img alt='' src='https:////secure.gravatar.com//avatar//8081b26e05bb4354f7d65ffc34cbbd67?s=80&amp;d=retro&amp;r=pg' srcset='https:\/\/secure.gravatar.com\/avatar\/8081b26e05bb4354f7d65ffc34cbbd67?s=160&#038;d=retro&#038;r=pg 2x' class='avatar avatar-80 photo' height='80' width='80' \/>    <\/a>\n  \n    <a class=\"author-name\" href=https://css-tricks.com/"https:////css-tricks.com//author//chriscoyier///">\n      Chris Coyier    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"in-article-card articles\" id=\"mini-post-14158\">\n\n  <time datetime=\"2018-10-05\" title=\"Originally published Sep 6, 2011\">\n    <strong>\n                \n        Article\n      <\/strong>\n\n    on\n\n    Dec 14, 2020  <\/time>\n\n  <h3>\n    <a href=https://css-tricks.com/"https:////css-tricks.com//one-invalid-pseudo-selector-equals-an-entire-ignored-selector///">\n      One Invalid Pseudo Selector Equals an Entire Ignored Selector    <\/a>\n  <\/h3>\n\n  \n      <div class=\"tags\">\n      <a href=https://css-tricks.com/"https:////css-tricks.com//tag//psuedo-elements///" rel=\"tag\">psuedo elements<\/a>    <\/div>\n  \n  <div class=\"author-row\">\n    <a href=https://css-tricks.com/"https:////css-tricks.com//author//chriscoyier///" aria-label=\"Author page of Chris Coyier\">\n      <img alt='' src='https:////secure.gravatar.com//avatar//8081b26e05bb4354f7d65ffc34cbbd67?s=80&amp;d=retro&amp;r=pg' srcset='https:\/\/secure.gravatar.com\/avatar\/8081b26e05bb4354f7d65ffc34cbbd67?s=160&#038;d=retro&#038;r=pg 2x' class='avatar avatar-80 photo' height='80' width='80' \/>    <\/a>\n  \n    <a class=\"author-name\" href=https://css-tricks.com/"https:////css-tricks.com//author//chriscoyier///">\n      Chris Coyier    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"in-article-card notes\" id=\"mini-post-14158\">\n\n  <time datetime=\"2019-02-27\" title=\"Originally published Sep 6, 2011\">\n    <strong>\n                \n        Article\n      <\/strong>\n\n    on\n\n    Jun 5, 2020  <\/time>\n\n  <h3>\n    <a href=https://css-tricks.com/"https:////css-tricks.com//text-wrapping-inline-pseudo-elements///">\n      Text Wrapping &#038; Inline Pseudo Elements    <\/a>\n  <\/h3>\n\n  \n      <div class=\"tags\">\n      <a href=https://css-tricks.com/"https:////css-tricks.com//tag//psuedo-elements///" rel=\"tag\">psuedo elements<\/a>    <\/div>\n  \n  <div class=\"author-row\">\n    <a href=https://css-tricks.com/"https:////css-tricks.com//author//chriscoyier///" aria-label=\"Author page of Chris Coyier\">\n      <img alt='' src='https:////secure.gravatar.com//avatar//8081b26e05bb4354f7d65ffc34cbbd67?s=80&amp;d=retro&amp;r=pg' srcset='https:\/\/secure.gravatar.com\/avatar\/8081b26e05bb4354f7d65ffc34cbbd67?s=160&#038;d=retro&#038;r=pg 2x' class='avatar avatar-80 photo' height='80' width='80' \/>    <\/a>\n  \n    <a class=\"author-name\" href=https://css-tricks.com/"https:////css-tricks.com//author//chriscoyier///">\n      Chris Coyier    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"in-article-card articles\" id=\"mini-post-14158\">\n\n  <time datetime=\"2017-05-31\" title=\"Originally published Sep 6, 2011\">\n    <strong>\n                \n        Article\n      <\/strong>\n\n    on\n\n    May 31, 2017  <\/time>\n\n  <h3>\n    <a href=https://css-tricks.com/"https:////css-tricks.com//animating-single-div-art///">\n      Animating Single Div Art    <\/a>\n  <\/h3>\n\n  \n      <div class=\"tags\">\n      <a href=https://css-tricks.com/"https:////css-tricks.com//tag//psuedo-elements///" rel=\"tag\">psuedo elements<\/a>    <\/div>\n  \n  <div class=\"author-row\">\n    <a href=https://css-tricks.com/"https:////css-tricks.com//author//dancwilson///" aria-label=\"Author page of Dan Wilson\">\n      <img alt='' src='https:////secure.gravatar.com//avatar//5f4f5f5767f27047cdac0892bf94bd24?s=80&amp;d=retro&amp;r=pg' srcset='https:\/\/secure.gravatar.com\/avatar\/5f4f5f5767f27047cdac0892bf94bd24?s=160&#038;d=retro&#038;r=pg 2x' class='avatar avatar-80 photo' height='80' width='80' \/>    <\/a>\n  \n    <a class=\"author-name\" href=https://css-tricks.com/"https:////css-tricks.com//author//dancwilson///">\n      Dan Wilson    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"in-article-card articles\" id=\"mini-post-14158\">\n\n  <time datetime=\"2018-06-05\" title=\"Originally published Sep 6, 2011\">\n    <strong>\n                \n        Article\n      <\/strong>\n\n    on\n\n    Sep 29, 2018  <\/time>\n\n  <h3>\n    <a href=https://css-tricks.com/"https:////css-tricks.com//1-element-css-rainbow-gradient-infinity///">\n      1 Element CSS Rainbow Gradient Infinity    <\/a>\n  <\/h3>\n\n  \n      <div class=\"tags\">\n      <a href=https://css-tricks.com/"https:////css-tricks.com//tag//psuedo-elements///" rel=\"tag\">psuedo elements<\/a>    <\/div>\n  \n  <div class=\"author-row\">\n    <a href=https://css-tricks.com/"https:////css-tricks.com//author//thebabydino///" aria-label=\"Author page of Ana Tudor\">\n      <img alt='' src='https:////secure.gravatar.com//avatar//bee436794e066a5423040cf673c7506f?s=80&amp;d=retro&amp;r=pg' srcset='https:\/\/secure.gravatar.com\/avatar\/bee436794e066a5423040cf673c7506f?s=160&#038;d=retro&#038;r=pg 2x' class='avatar avatar-80 photo' height='80' width='80' \/>    <\/a>\n  \n    <a class=\"author-name\" href=https://css-tricks.com/"https:////css-tricks.com//author//thebabydino///">\n      Ana Tudor    <\/a>\n  <\/div>\n\n<\/article>\n    <\/div>\n  \n","protected":false},"excerpt":{"rendered":"<p>The ::before and ::after pseudo-elements in CSS allows you to insert content onto a page without it needing to be [&hellip;]<\/p>\n","protected":false},"author":1036,"featured_media":0,"parent":14146,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"page-almanac-single.php","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,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","_share_on_mastodon":"0","_share_on_mastodon_status":"%title% %permalink%"},"tags":[1158],"acf":[],"share_on_mastodon":{"url":"","error":""},"jetpack_sharing_enabled":true,"jetpack-related-posts":[],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/14158"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/1036"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=14158"}],"version-history":[{"count":10,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/14158\/revisions"}],"predecessor-version":[{"id":374180,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/14158\/revisions\/374180"}],"up":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/14146"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=14158"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=14158"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}