{"id":9516,"date":"2011-06-13T11:42:39","date_gmt":"2011-06-13T18:42:39","guid":{"rendered":"http:\/\/css-tricks.com\/?p=9516"},"modified":"2021-08-19T11:50:26","modified_gmt":"2021-08-19T18:50:26","slug":"pseudo-element-roundup","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/pseudo-element-roundup\/","title":{"rendered":"A Whole Bunch of Amazing Stuff Pseudo Elements Can Do"},"content":{"rendered":"\n<p>It&#8217;s pretty amazing what you can do with the pseudo-elements <a href=\"https:\/\/css-tricks.com\/almanac\/selectors\/a\/after-and-before\/\"><code>::before<\/code> and <code>::after<\/code><\/a>. For every element on the page, you get two more free ones that you can do just about anything another HTML element could do. They unlock a whole lot of interesting design possibilities without negatively affecting the semantics of your markup. Here&#8217;s a whole bunch of those amazing things. A roundup, if you will.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-give-you-multiple-background-canvases\">Give you multiple background canvases<\/h3>\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"570\" height=\"551\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2011\/06\/multiplecanvases.jpg?resize=570%2C551\" alt=\"\" class=\"wp-image-9661\" title=\"multiplecanvases\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2011\/06\/multiplecanvases.jpg?w=570&amp;ssl=1 570w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2011\/06\/multiplecanvases.jpg?resize=300%2C290&amp;ssl=1 300w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><\/figure>\n\n\n\n<p>Because you can absolutely position pseudo-elements relative to their parent element, you can think of them as two extra layers to play with for every element. <a href=\"http:\/\/nicolasgallagher.com\/multiple-backgrounds-and-borders-with-css2\/\" rel=\"noopener\">Nicolas Gallagher shows us<\/a> lots of applications of this, including multiple borders, simulating CSS3 multiple backgrounds, and equal height columns.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-expand-the-number-of-shapes-you-can-make-with-a-single-element\">Expand the number of shapes you can make with a single element<\/h3>\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"570\" height=\"152\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2011\/06\/shapes.png?resize=570%2C152\" alt=\"\" class=\"wp-image-9662\" title=\"shapes\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2011\/06\/shapes.png?w=570&amp;ssl=1 570w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2011\/06\/shapes.png?resize=300%2C80&amp;ssl=1 300w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><\/figure>\n\n\n\n<p>All of the shapes above <a href=\"https:\/\/css-tricks.com\/examples\/ShapesOfCSS\/\">and many more<\/a> can be created with a single element, which makes them actually practical. As opposed to those &#8220;make a coffee cup with pure CSS!&#8221; things that use 1,700 divs, which are neat but not practical.<\/p>\n\n\n\n<p>Here&#8217;s an example of a six-pointed star:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">#star-six {\n  width: 0;\n  height: 0;\n  border-left: 50px solid transparent;\n  border-right: 50px solid transparent;\n  border-bottom: 100px solid red;\n  position: relative;\n}\n#star-six:after {\n  width: 0;\n  height: 0;\n  border-left: 50px solid transparent;\n  border-right: 50px solid transparent;\n  border-top: 100px solid red;\n  position: absolute;\n  content: \"\";\n  top: 30px;\n  left: -50px;\n}<\/code><\/pre>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-show-url-s-of-links-in-printed-web-pages\">Show URL&#8217;s of links in printed web pages<\/h3>\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"570\" height=\"266\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2011\/06\/printpreview.png?resize=570%2C266\" alt=\"\" class=\"wp-image-9677\" title=\"printpreview\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2011\/06\/printpreview.png?w=570&amp;ssl=1 570w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2011\/06\/printpreview.png?resize=300%2C140&amp;ssl=1 300w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><\/figure>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">@media print {\n  a[href]:after {\n    content: \" (\" attr(href) \") \";\n  }\n}<\/code><\/pre>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-clear-floats\">Clear floats<\/h3>\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"552\" height=\"323\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2011\/06\/floatclear.png?resize=552%2C323\" alt=\"\" class=\"wp-image-9680\" title=\"floatclear\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2011\/06\/floatclear.png?w=552&amp;ssl=1 552w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2011\/06\/floatclear.png?resize=300%2C176&amp;ssl=1 300w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><\/figure>\n\n\n\n<p>Rather than insert extra non-semantic markup to clear the float on container elements, we can use a pseudo-element to do that for us. Commonly known as the <a href=\"https:\/\/css-tricks.com\/snippets\/css\/clear-fix\/\">&#8220;clearfix&#8221;<\/a>, and more semantically titled with the class name &#8220;group&#8221;.<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">.group:before,\n.group:after {\n  content: \"\";\n  display: table;\n}\n.group:after {\n  clear: both;\n}\n.group {\n  zoom: 1; \/* For IE 6\/7 (trigger hasLayout) *\/\n}<\/code><\/pre>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-simulate-float-center\">Simulate float: center;<\/h3>\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"671\" height=\"406\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2011\/04\/catinmiddle1.png?resize=671%2C406\" alt=\"\" class=\"wp-image-9069\" title=\"catinmiddle\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2011\/04\/catinmiddle1.png?w=671&amp;ssl=1 671w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2011\/04\/catinmiddle1.png?resize=300%2C182&amp;ssl=1 300w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><\/figure>\n\n\n\n<p>The <a title=\"float property\" href=\"https:\/\/css-tricks.com\/almanac\/properties\/f\/float\/\">float<\/a> property doesn&#8217;t actually have a value of center, despite how much we might want it. Float does have left and right though, and by using placeholder pseudo elements we can carve out an area between two columns and place an image there, we can <a href=\"https:\/\/css-tricks.com\/float-center\/\">simulate the effect<\/a>.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-label-blocks-of-code-with-the-language-it-is-in\">Label blocks of code with the language it is in<\/h3>\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"518\" height=\"203\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2011\/06\/codeblock.png?resize=518%2C203\" alt=\"\" class=\"wp-image-9684\" title=\"codeblock\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2011\/06\/codeblock.png?w=518&amp;ssl=1 518w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2011\/06\/codeblock.png?resize=300%2C118&amp;ssl=1 300w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><\/figure>\n\n\n\n<p>In the current design of this very site, the blocks of code are labeled with what language of code they are with a pseudo-element:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">pre::after {\n  content: attr(rel);\n  position: absolute;\n  top: 22px;\n  right: 12px;\n}<\/code><\/pre>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-create-an-entire-icon-set\">Create an entire icon set<\/h3>\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"546\" height=\"400\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2011\/06\/icons.png?resize=546%2C400\" alt=\"\" class=\"wp-image-9664\" title=\"icons\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2011\/06\/icons.png?w=546&amp;ssl=1 546w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2011\/06\/icons.png?resize=300%2C220&amp;ssl=1 300w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><\/figure>\n\n\n\n<p>Nicolas Gallagher again taking the idea of the shapes to another level by creating a massive set of icons created with no images, only pseudo-elements on (at most) two elements each.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-use-available-space-more-efficiently\">Use available space more efficiently<\/h3>\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"570\" height=\"425\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2011\/06\/mediaqueriesandpseudos.png?resize=570%2C425\" alt=\"\" class=\"wp-image-9686\" title=\"mediaqueriesandpseudos\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2011\/06\/mediaqueriesandpseudos.png?w=570&amp;ssl=1 570w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2011\/06\/mediaqueriesandpseudos.png?resize=300%2C224&amp;ssl=1 300w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><\/figure>\n\n\n\n<p>What CSS giveth, CSS can taketh away. What I mean is that pseudo-element content can be <a href=\"https:\/\/css-tricks.com\/css-media-queries\/\">applied or removed conditionally via media queries<\/a>. Perhaps you apply an icon when space is limited, and replace that with a more descriptive word when there is more room.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-apply-typographic-flourishes\">Apply typographic flourishes<\/h3>\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"540\" height=\"334\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2011\/06\/typographicflourishheader.jpg?resize=540%2C334\" alt=\"\" class=\"wp-image-9693\" title=\"typographicflourishheader\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2011\/06\/typographicflourishheader.jpg?w=540&amp;ssl=1 540w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2011\/06\/typographicflourishheader.jpg?resize=300%2C186&amp;ssl=1 300w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><\/figure>\n\n\n\n<p>If your pseudo-elements are text, they inherit the same typographic styles as their parent element. But while you are setting their content, you can style them as well. Like, say, use a different font and a different color to make your headers stand out with a flourish.<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">h2 {\n  text-align: center;     \n}\nh2:before, h2:after {\n  font-family: \"Some cool font with glyphs\", serif;\n  content: \"\\00d7\";  \/* Some fancy character *\/\n  color: #c83f3f;\n}\nh2:before {\n  margin-right: 10px;\n}\nh2:after {\n  margin-left: 10px;\n}<\/code><\/pre>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-create-full-browser-width-bars\">Create full browser width bars<\/h3>\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"570\" height=\"283\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2011\/06\/fullwidthbrowserbars.jpg?resize=570%2C283\" alt=\"\" class=\"wp-image-9696\" title=\"fullwidthbrowserbars\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2011\/06\/fullwidthbrowserbars.jpg?w=570&amp;ssl=1 570w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2011\/06\/fullwidthbrowserbars.jpg?resize=300%2C149&amp;ssl=1 300w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><\/figure>\n\n\n\n<p>When you need elements whose background stretches full width but whose content does not, you are often stuck with non-semantic internal wrapping elements or repetitive and cluttery spacing declarations. Or you can <a href=\"https:\/\/css-tricks.com\/full-browser-width-bars\/\">simulate the effect<\/a> by limiting the content width with one element and making the header bar reach out to the edges with pseudo-elements.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-create-a-body-border\">Create a body border<\/h3>\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"549\" height=\"425\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2011\/06\/bodyborder.png?resize=549%2C425\" alt=\"\" class=\"wp-image-9697\" title=\"bodyborder\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2011\/06\/bodyborder.png?w=549&amp;ssl=1 549w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2011\/06\/bodyborder.png?resize=300%2C232&amp;ssl=1 300w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><\/figure>\n\n\n\n<p>Using a regular border on the left and right, and fixed position pseudo-element bars on the top and bottom, we can get a <a href=\"https:\/\/css-tricks.com\/body-border\/\">&#8220;body border&#8221; effect<\/a> without any dedicated markup at all.<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">body::before, body::after {\n  content: \"\";\n  position: fixed;\n  background: #900;\n  left: 0;\n  right: 0;\n  height: 10px;\n}\nbody::before {\n  top: 0;\n}\nbody::after {\n  bottom: 0;\n}\nbody {\n  border-left: 10px solid #900;\n  border-right: 10px solid #900;\n}<\/code><\/pre>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-make-a-gleaming-button\">Make a gleaming button<\/h3>\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"518\" height=\"250\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2011\/06\/gleamingbutton.png?resize=518%2C250\" alt=\"\" class=\"wp-image-9708\" title=\"gleamingbutton\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2011\/06\/gleamingbutton.png?w=518&amp;ssl=1 518w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2011\/06\/gleamingbutton.png?resize=300%2C145&amp;ssl=1 300w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><\/figure>\n\n\n\n<p>If you make a pseudo-element block that has a transparent to white to transparent gradient on it, position it outside of the button (which hides it with hidden overflow), and transition-move it across the button on hover, you can make a button that seems to catch a bit of light as you mouse over it. Only supported for Firefox, Chrome 26+, and IE10+.<\/p>\n\n\n\n<p><a href=\"http:\/\/anton.trollback.se\/shine-effect\/\" rel=\"noopener\">Original<\/a> by Anton Trollb\u00e4ck; <a href=\"http:\/\/jsfiddle.net\/necolas\/KbNq7\/\" rel=\"noopener\">Pseudoelementized<\/a> by Nicolas Gallagher; <a href=\"http:\/\/cdpn.io\/mqAHt\" rel=\"noopener\">Another version<\/a> by me.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-fade-out-a-page-when-a-particular-link-is-rolled-over\">Fade out a page when a particular link is rolled over<\/h3>\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"570\" height=\"300\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2011\/06\/pagefadeout.jpg?resize=570%2C300\" alt=\"\" class=\"wp-image-9700\" title=\"pagefadeout\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2011\/06\/pagefadeout.jpg?w=570&amp;ssl=1 570w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2011\/06\/pagefadeout.jpg?resize=300%2C158&amp;ssl=1 300w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><\/figure>\n\n\n\n<p>If you don&#8217;t set relative positioning on an element, absolutely positioned pseudo-elements will be positioned relative to the next parent that does. If nothing else does, it will be relative to the root element. You can use that to make a full-browser-window element, stack it underneath the main element, and reveal it on hover making a <a href=\"http:\/\/cdpn.io\/dxyfA\" rel=\"noopener\">&#8220;page fade out&#8221; effect<\/a> on a link.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-style-a-header-like-a-three-dimensional-ribbon\">Style a header like a three dimensional ribbon<\/h3>\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"570\" height=\"126\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2011\/06\/ribbon.png?resize=570%2C126\" alt=\"\" class=\"wp-image-9701\" title=\"ribbon\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2011\/06\/ribbon.png?w=570&amp;ssl=1 570w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2011\/06\/ribbon.png?resize=300%2C66&amp;ssl=1 300w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><\/figure>\n\n\n\n<p>Everybody loves ribbons! <a href=\"https:\/\/css-tricks.com\/snippets\/css\/ribbon\/\">Check out this snippet<\/a> for the HTML and CSS for this one. It makes use of negative <code>z-index<\/code>, which in some cases requires an additional wrapping element to prevent losing the element underneath a parent with an opaque background.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-style-the-numbers-in-ordered-lists\">Style the numbers in ordered lists<\/h3>\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"570\" height=\"331\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2011\/06\/orderedlist.png?resize=570%2C331\" alt=\"\" class=\"wp-image-9702\" title=\"orderedlist\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2011\/06\/orderedlist.png?w=570&amp;ssl=1 570w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2011\/06\/orderedlist.png?resize=300%2C174&amp;ssl=1 300w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><\/figure>\n\n\n\n<p>Have you ever tried to style the numbers in an ordered list? You end up doing dumb stuff like wrapping the insides in spans, styling the list items, then removing that styling with the span. Or using background images in crazy ways. Or removing the list styling and putting in your own numbers. All those ways suck. Much better to utilize <a href=\"http:\/\/www.456bereastreet.com\/archive\/201105\/styling_ordered_list_numbers\/\" rel=\"noopener\">pseudo-elements as counters<\/a>.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-make-data-tables-responsive\">Make data tables responsive<\/h3>\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"396\" height=\"380\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2011\/06\/mobiletable.jpg?resize=396%2C380\" alt=\"\" class=\"wp-image-9703\" title=\"mobiletable\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2011\/06\/mobiletable.jpg?w=396&amp;ssl=1 396w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2011\/06\/mobiletable.jpg?resize=300%2C288&amp;ssl=1 300w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><\/figure>\n\n\n\n<p>Large data tables are awful to browse on small screens. Either they are zoomed in and require both vertical and horizontal scrolling, or they are zoomed out and too small to read. We can combine CSS media queries with pseudo-elements to <a href=\"https:\/\/css-tricks.com\/responsive-data-tables\/\">make the data table responsive<\/a> and reformat it to a more readable view when on small screens.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-create-styled-tooltips\">Create styled tooltips<\/h3>\n\n\n<figure class=\"wp-block-image align-none media-199137\" id=\"post-199137\"><img decoding=\"async\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2011\/06\/tooltip1.png\" alt=\"\" data-recalc-dims=\"1\"\/><\/figure>\n\n\n\n<p>Using an HTML5 data attribute, then pulling that attribute in and styling it as a pseudo-element, we can <a href=\"http:\/\/codepen.io\/team\/css-tricks\/pen\/RPmpYa\" rel=\"noopener\">create completely custom tooltips<\/a> through CSS.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-add-delimiters-between-navigation-items\">Add delimiters between navigation items<\/h3>\n\n\n<figure class=\"wp-block-image align-none media-198910\" id=\"post-198910\"><img decoding=\"async\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2011\/06\/menu-spacers.png?ssl=1\" alt=\"Pseudo element delimiters\" data-recalc-dims=\"1\"\/><\/figure>\n\n\n\n<p>If you want to distinguish one nav item from the next, your options are limited: You can add a border (boring) or you can add extra markup between each item (yuck). Pseudo-elements let you use <em>any<\/em> content as a spacer between your items:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">.menu li:before {\n  content: \"\/\/ \";\n  position: relative;\n  left: -1px;\n}<\/code><\/pre>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-make-an-entire-website-without-html\">Make an entire website without HTML<\/h3>\n\n\n<figure class=\"wp-block-image align-none\"><img decoding=\"async\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2010\/12\/websitewithouthtml.jpg\" alt=\"Website without HTML\" data-recalc-dims=\"1\"\/><\/figure>\n\n\n\n<p>Leveraging browsers\u2019 automatic insertion of\u00a0<code>&lt;html><\/code>,\u00a0<code>&lt;head><\/code>\u00a0and\u00a0<code>&lt;body><\/code>\u00a0tags,\u00a0<a href=\"https:\/\/mathiasbynens.be\/\" rel=\"noopener\">Mathias Bynens<\/a>\u00a0shows\u00a0<a href=\"https:\/\/css-tricks.com\/using-css-without-html\/\">how to create a website using only CSS<\/a>\u00a0and pseudo-element content.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-build-a-css-only-font\">Build a CSS-only font<\/h3>\n\n\n<figure class=\"wp-block-image align-none media-198912\" id=\"post-198912\"><img decoding=\"async\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2011\/06\/css-sans.png?ssl=1\" alt=\"CSS Sans\" data-recalc-dims=\"1\"\/><\/figure>\n\n\n\n<p>Using a single HTML element (plus pseudos) for each character, <a href=\"http:\/\/yusugomori.com\/\" rel=\"noopener\">Yusuke Sugomori<\/a> built an entire font via CSS called <a href=\"http:\/\/yusugomori.com\/projects\/css-sans\/fonts\" rel=\"noopener\">CSS Sans<\/a>. The interactive demo lets you browse all of the clever techniques (e.g. rotation, border-radius, and skew) Yusuke used to build each character.<\/p>\n\n\n\n<p>The font is limited to the uppercase Latin alphabet and is quite lovely. The CSS Sans project is a great demonstration of creativity built around constraints.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>It&#8217;s pretty amazing what you can do with the pseudo elements <code>:before<\/code> and <code>:after<\/code>. For every element on the page, you get two more free ones that you can do just about anything another HTML element could do. They unlock a whole lot of interesting design possibilities without negatively affecting the semantics of your markup. Here&#8217;s a whole bunch of those amazing things. A roundup, if you will.<\/p>\n","protected":false},"author":3,"featured_media":274934,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","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":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":[]},"categories":[4],"tags":[],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2011\/06\/psuedos.png?fit=1200%2C600&ssl=1","jetpack-related-posts":[{"id":151172,"url":"https:\/\/css-tricks.com\/custom-controls-in-html5-video-full-screen\/","url_meta":{"origin":9516,"position":0},"title":"Hiding Native HTML5 Video Controls in Full-Screen Mode","date":"September 26, 2013","format":false,"excerpt":"The following is a guest post by Sara Soueidan. I know Sara through all her excellent work on CodePen. She was working on some custom HTML5 video controls and noticed that the customizations were lost when the video went into full screen mode (example of that happening). Digging into the\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":339586,"url":"https:\/\/css-tricks.com\/custom-state-pseudo-classes-in-chrome\/","url_meta":{"origin":9516,"position":1},"title":"Custom State Pseudo-Classes in Chrome","date":"May 6, 2021","format":false,"excerpt":"There is an increasing number of \u201ccustom\u201d features on the web platform. We have custom properties (--my-property), custom elements (<my-element>), and custom events (new CustomEvent('myEvent')). At one point, we might even get custom media queries (@media (--my-media)). But that\u2019s not all! You might have missed it because it wasn\u2019t mentioned\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/04\/css-custom-pseudo-class-state.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":351992,"url":"https:\/\/css-tricks.com\/7-practical-uses-for-the-before-and-after-pseudo-elements-in-css\/","url_meta":{"origin":9516,"position":2},"title":"7 Practical Uses for the ::before and ::after Pseudo-Elements in CSS","date":"September 21, 2021","format":false,"excerpt":"CSS ::before and ::after pseudo-elements allow you to insert \"content\" before and after any non-replaced element (e.g. they work on a <div> but not an <input>). This effectively allows you to show something on a web page that might not be present in the HTML content. You shouldn\u2019t use it\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/09\/pseudo-effects.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":164669,"url":"https:\/\/css-tricks.com\/thoughts-media-queries-elements\/","url_meta":{"origin":9516,"position":3},"title":"Thoughts on Media Queries for Elements","date":"March 4, 2014","format":false,"excerpt":"Imagine something like these Transformer Tabs as a widget in a fluid column in a responsive design. Depending on the browser window width, perhaps this design is either 4, 2, or 1 column wide. When it breaks from 4 to 2, the column probably temporarily gets wider than it was,\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":366252,"url":"https:\/\/css-tricks.com\/conditionally-styling-selected-elements-in-a-grid-container\/","url_meta":{"origin":9516,"position":4},"title":"Conditionally Styling Selected Elements in a Grid Container","date":"June 15, 2022","format":false,"excerpt":"Calendars, shopping carts, galleries, file explorers, and online libraries are some situations where selectable items are shown in grids (i.e. square lattices). You know, even those security checks that ask you to select all images with crosswalks or whatever. \ud83e\uddd0 I found a neat way to display selectable options in\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/06\/s_C6C1FBE60A3624B876B34697BF3BE9266CAA9E9CFB20B11CDBDE5D32FDF0FD18_1654436553993_diagram-1.png?fit=1200%2C877&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":160517,"url":"https:\/\/css-tricks.com\/css-animation-tricks\/","url_meta":{"origin":9516,"position":5},"title":"CSS Animation Tricks: State Jumping, Negative Delays, Animating Origin, and More","date":"January 16, 2014","format":false,"excerpt":"I've fallen into the habit of creating CSS animations in my free time, inspired by things I come across during the day. To create the animations as I imagine them using as few elements as possible, I've found some tricks to make CSS do things you might not know it\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"featured_media_src_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2011\/06\/psuedos.png?fit=1024%2C512&ssl=1","_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/9516"}],"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=9516"}],"version-history":[{"count":10,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/9516\/revisions"}],"predecessor-version":[{"id":350208,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/9516\/revisions\/350208"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/274934"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=9516"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=9516"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=9516"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}