{"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\/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:\/\/codepen.io\/team\/css-tricks\/pen\/gBaaGo\" rel=\"noopener\">cannot be resized.<\/a> Since things like <a href=\"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\/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=\"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\/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:\/\/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\" rel=\"noopener\">you really need one<\/a>.<\/li><\/ul>\n\n\n\n<p>Note that you <a href=\"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\" 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=\"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\">123<\/span><\/td><td class=\"y yep\" title=\"Android Firefox - \"><span class=\"caniuse-agents-version version\">124<\/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 article\" 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\/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\/tag\/psuedo-elements\/\" rel=\"tag\">psuedo elements<\/a>    <\/div>\n  \n  <div class=\"author-row\">\n    <a href=\"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:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/09\/KnTxmgs6_400x400.jpg?resize=80%2C80&#038;ssl=1\" width=\"80\"  data-recalc-dims=\"1\">    <\/a>\n  \n    <a class=\"author-name\" href=\"https:\/\/css-tricks.com\/author\/habdulhazeez\/\">\n      Habdul Hazeez    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"in-article-card article\" 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\/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\/tag\/psuedo-elements\/\" rel=\"tag\">psuedo elements<\/a>    <\/div>\n  \n  <div class=\"author-row\">\n    <a href=\"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&#038;d=retro&#038;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\/author\/thebabydino\/\">\n      Ana Tudor    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"in-article-card article\" 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\/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\/tag\/psuedo-elements\/\" rel=\"tag\">psuedo elements<\/a>    <\/div>\n  \n  <div class=\"author-row\">\n    <a href=\"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:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/05\/me-150x150-1.jpg?resize=80%2C80&#038;ssl=1\" width=\"80\"  data-recalc-dims=\"1\">    <\/a>\n  \n    <a class=\"author-name\" href=\"https:\/\/css-tricks.com\/author\/nicholaszakas\/\">\n      Nicholas C. Zakas    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"in-article-card article\" 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\/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\/tag\/psuedo-elements\/\" rel=\"tag\">psuedo elements<\/a>    <\/div>\n  \n  <div class=\"author-row\">\n    <a href=\"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&#038;d=retro&#038;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\/author\/dancwilson\/\">\n      Dan Wilson    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"in-article-card article\" 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\/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\/tag\/psuedo-elements\/\" rel=\"tag\">psuedo elements<\/a>    <\/div>\n  \n  <div class=\"author-row\">\n    <a href=\"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&#038;d=retro&#038;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\/author\/simevidas\/\">\n      \u0160ime Vidas    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"in-article-card link\" 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\/css-pseudo-commas\/\">\n      CSS Pseudo Commas    <\/a>\n  <\/h3>\n\n  \n      <div class=\"tags\">\n      <a href=\"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\/author\/geoffgraham\/\" aria-label=\"Author page of Geoff Graham\">\n      <img alt='' src='https:\/\/secure.gravatar.com\/avatar\/1a1b5ca4b139c0c8caaea26ef437d943?s=80&#038;d=retro&#038;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\/author\/geoffgraham\/\">\n      Geoff Graham    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"in-article-card article\" 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\/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\/tag\/psuedo-elements\/\" rel=\"tag\">psuedo elements<\/a>    <\/div>\n  \n  <div class=\"author-row\">\n    <a href=\"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&#038;d=retro&#038;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\/author\/daveseidman\/\">\n      Dave Seidman    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"in-article-card article\" 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\/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\/tag\/psuedo-elements\/\" rel=\"tag\">psuedo elements<\/a>    <\/div>\n  \n  <div class=\"author-row\">\n    <a href=\"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&#038;d=retro&#038;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\/author\/daveseidman\/\">\n      Dave Seidman    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"in-article-card article\" 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\/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\/tag\/psuedo-elements\/\" rel=\"tag\">psuedo elements<\/a>    <\/div>\n  \n  <div class=\"author-row\">\n    <a href=\"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:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/03\/avatar-1024.jpg?resize=80%2C80&#038;ssl=1\" width=\"80\"  data-recalc-dims=\"1\">    <\/a>\n  \n    <a class=\"author-name\" href=\"https:\/\/css-tricks.com\/author\/silvestar\/\">\n      Silvestar Bistrovi\u0107    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"in-article-card article\" 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\/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\/tag\/psuedo-elements\/\" rel=\"tag\">psuedo elements<\/a>    <\/div>\n  \n  <div class=\"author-row\">\n    <a href=\"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&#038;d=retro&#038;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\/author\/chrisgeelhoed\/\">\n      Chris Geelhoed    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"in-article-card article\" 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\/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\/tag\/psuedo-elements\/\" rel=\"tag\">psuedo elements<\/a>    <\/div>\n  \n  <div class=\"author-row\">\n    <a href=\"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&#038;d=retro&#038;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\/author\/bretcameron\/\">\n      Bret Cameron    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"in-article-card article\" 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\/injecting-line-break\/\">\n      Injecting a Line Break    <\/a>\n  <\/h3>\n\n  \n      <div class=\"tags\">\n      <a href=\"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\/author\/chriscoyier\/\" aria-label=\"Author page of Chris Coyier\">\n      <img alt='' src='https:\/\/secure.gravatar.com\/avatar\/8081b26e05bb4354f7d65ffc34cbbd67?s=80&#038;d=retro&#038;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\/author\/chriscoyier\/\">\n      Chris Coyier    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"in-article-card article\" 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\/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\/tag\/psuedo-elements\/\" rel=\"tag\">psuedo elements<\/a>    <\/div>\n  \n  <div class=\"author-row\">\n    <a href=\"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&#038;d=retro&#038;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\/author\/geoffgraham\/\">\n      Geoff Graham    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"in-article-card article\" 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\/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\/tag\/psuedo-elements\/\" rel=\"tag\">psuedo elements<\/a>    <\/div>\n  \n  <div class=\"author-row\">\n    <a href=\"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&#038;d=retro&#038;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\/author\/afiftemani\/\">\n      Temani Afif    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"in-article-card article\" 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\/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\/tag\/psuedo-elements\/\" rel=\"tag\">psuedo elements<\/a>    <\/div>\n  \n  <div class=\"author-row\">\n    <a href=\"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&#038;d=retro&#038;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\/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 article\" 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\/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\/tag\/psuedo-elements\/\" rel=\"tag\">psuedo elements<\/a>    <\/div>\n  \n  <div class=\"author-row\">\n    <a href=\"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&#038;d=retro&#038;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\/author\/chriscoyier\/\">\n      Chris Coyier    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"in-article-card article\" 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\/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\/tag\/psuedo-elements\/\" rel=\"tag\">psuedo elements<\/a>    <\/div>\n  \n  <div class=\"author-row\">\n    <a href=\"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&#038;d=retro&#038;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\/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\/video-screencasts\/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\/tag\/psuedo-elements\/\" rel=\"tag\">psuedo elements<\/a>    <\/div>\n  \n  <div class=\"author-row\">\n    <a href=\"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&#038;d=retro&#038;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\/author\/chriscoyier\/\">\n      Chris Coyier    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"in-article-card article\" 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\/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\/tag\/psuedo-elements\/\" rel=\"tag\">psuedo elements<\/a>    <\/div>\n  \n  <div class=\"author-row\">\n    <a href=\"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&#038;d=retro&#038;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\/author\/chriscoyier\/\">\n      Chris Coyier    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"in-article-card article\" 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\/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\/tag\/psuedo-elements\/\" rel=\"tag\">psuedo elements<\/a>    <\/div>\n  \n  <div class=\"author-row\">\n    <a href=\"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&#038;d=retro&#038;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\/author\/chriscoyier\/\">\n      Chris Coyier    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"in-article-card article\" 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\/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\/tag\/psuedo-elements\/\" rel=\"tag\">psuedo elements<\/a>    <\/div>\n  \n  <div class=\"author-row\">\n    <a href=\"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&#038;d=retro&#038;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\/author\/chriscoyier\/\">\n      Chris Coyier    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"in-article-card link\" 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\/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\/tag\/psuedo-elements\/\" rel=\"tag\">psuedo elements<\/a>    <\/div>\n  \n  <div class=\"author-row\">\n    <a href=\"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&#038;d=retro&#038;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\/author\/chriscoyier\/\">\n      Chris Coyier    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"in-article-card article\" 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\/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\/tag\/psuedo-elements\/\" rel=\"tag\">psuedo elements<\/a>    <\/div>\n  \n  <div class=\"author-row\">\n    <a href=\"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&#038;d=retro&#038;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\/author\/dancwilson\/\">\n      Dan Wilson    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"in-article-card article\" 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\/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\/tag\/psuedo-elements\/\" rel=\"tag\">psuedo elements<\/a>    <\/div>\n  \n  <div class=\"author-row\">\n    <a href=\"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&#038;d=retro&#038;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\/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 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: The only reasons to use one over [&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":{"_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":""},"tags":[1158],"acf":[],"jetpack-related-posts":[{"id":339498,"url":"https:\/\/css-tricks.com\/almanac\/selectors\/e\/empty\/","url_meta":{"origin":14158,"position":0},"title":":empty","date":"April 27, 2021","format":false,"excerpt":"The CSS :empty pseudo-class selects any element that does not contain children for a given selector. \/* Changes the background color of every empty section element *\/ section:empty { background-color: tomato; } If we were to run that code on a page, the CSS would look for a <section> element\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":330211,"url":"https:\/\/css-tricks.com\/video-screencasts\/199-messing-with-jsx\/","url_meta":{"origin":14158,"position":1},"title":"#199: Messing with JSX","date":"December 9, 2020","format":false,"excerpt":"I probably should have learned this long ago, but alas, here we are. Turns out you can tell what function you want JSX to use. Yep, JSX really only has one primary transformation that it does. It turns angle brackets in JavaScript into a function call. So, if you write\u2026","rel":"","context":"In \"jsx\"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/12\/jsx-thumb.png?fit=1200%2C675&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":3381,"url":"https:\/\/css-tricks.com\/snippets\/jquery\/make-entire-div-clickable\/","url_meta":{"origin":14158,"position":2},"title":"Make Entire Div Clickable","date":"August 11, 2009","format":false,"excerpt":"Update November 2020: I think the best possible technique for this is Method 4 in this article. The <div> (or whatever wrapper element) remains semantic and accessible, while being \"clickable\" over the whole area. It doesn't break text selection and respects other \"nested\" interactive elements. This is perfectly valid HTML:\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":13980,"url":"https:\/\/css-tricks.com\/almanac\/properties\/b\/backface-visibility\/","url_meta":{"origin":14158,"position":3},"title":"backface-visibility","date":"August 31, 2011","format":false,"excerpt":"The backface-visibility property relates to 3D transforms. With 3D transforms, you can manage to rotate an element so what we think of as the \"front\" of an element no longer faces the screen. For instance, this would flip an element away from the screen: .flip { transform: rotateY(180deg); } It\u2026","rel":"","context":"In \"3d\"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":14031,"url":"https:\/\/css-tricks.com\/almanac\/properties\/c\/content\/","url_meta":{"origin":14158,"position":4},"title":"content","date":"September 5, 2011","format":false,"excerpt":"The content property in CSS is used in conjunction with the pseudo-elements ::before and ::after. It is used to literally insert content. There are four value types it can have. String .name::before { content: \"Name: \"; } Then an element like this: <div class=\"name\">Chris<\/div> Would render like this: Name: Chris\u2026","rel":"","context":"With 21 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":306845,"url":"https:\/\/css-tricks.com\/snippets\/javascript\/the-classlist-api\/","url_meta":{"origin":14158,"position":5},"title":"The .classList() API","date":"April 20, 2020","format":false,"excerpt":"Assuming you have an element in the DOM: <div id=\"el\"><\/div> Get a reference to that DOM element: const el = document.querySelector(\"#el\"); Then you can manipulate the classes on that element with the classList method. \/\/ Add a class el.classList.add(\"open\"); \/\/ Add many classes el.classList.add(\"this\", \"little\", \"piggy\"); let classes = [\"is-message\",\u2026","rel":"","context":"With 2 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_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}]}}