{"id":479,"date":"2019-08-17T18:20:03","date_gmt":"2019-08-17T22:20:03","guid":{"rendered":"https:\/\/www.blindemanwebsites.com\/today-i-learned\/?p=479"},"modified":"2020-10-22T19:31:37","modified_gmt":"2020-10-22T23:31:37","slug":"spacing-in-css-pseudo-element-content","status":"publish","type":"post","link":"https:\/\/www.blindemanwebsites.com\/today-i-learned\/2019\/spacing-in-css-pseudo-element-content\/","title":{"rendered":"Spacing in CSS pseudo-element content"},"content":{"rendered":"\n\n\n<p>A bit of an abstract title but I&#8217;m basically taking about:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"css\" class=\"language-css\">h4::after {\n    content: \"\";\n}\n<\/code><\/pre>\n\n\n\n<p>If you have just text in the content property, you can adjust spacing with the letter-spacing and\/or word-spacing properties in CSS. Letter-spacing would even work if you have just icons but I had a combination of three icons and a word, and the letter-spacing I wanted between the icons pulled the letters of the word too far apart. You can&#8217;t use html in the content property of a pseudo-element like ::before or :: after, so &amp;nbsp; is out.<\/p>\n\n\n\n<p><strong>What<\/strong>: I found my solution on Stack Overflow, see link below, where someone had given a pretty list of the different spaces in CSS as a solution to a similar problem.<\/p>\n\n\n\n<!--more-->\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"css\" class=\"language-css\">h4::after {\n    content: \"Hello\\2002\\f0ac\";\n}\n<\/code><\/pre>\n\n\n\n<p>With <code>\\2002<\/code> representing an en-space and <code>\\f0ac<\/code> a FontAwesome icon of a globe.<\/p>\n\n\n\n<p><strong>Where<\/strong>: <a href=\"https:\/\/stackoverflow.com\/questions\/50264375\/add-a-space-in-css-content#answer-50265037\" target=\"_blank\" rel=\"noreferrer noopener\">Answer on Stack Overflow by Zer00ne<\/a><\/p>\n\n\n\n<p><strong>More<\/strong>: The best resource I&#8217;ve found so far is <a href=\"https:\/\/www.htmlsymbols.xyz\/\" target=\"_blank\" rel=\"noreferrer noopener\">HTML Symbols<\/a> &#8211; Unicode symbols, entities &amp; codes. It&#8217;s vast and comprehensive.<\/p>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<p>Photo by&nbsp;<a href=\"https:\/\/unsplash.com\/@martimbraz?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText\" target=\"_blank\" rel=\"noreferrer noopener\">Martim Braz<\/a>&nbsp;on&nbsp;<a href=\"https:\/\/unsplash.com\/search\/photos\/hello-world?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText\" target=\"_blank\" rel=\"noreferrer noopener\">Unsplash<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>A bit of an abstract title but I&#8217;m basically taking about: If you have just text in the content property, you can adjust spacing with the letter-spacing and\/or word-spacing properties in CSS. Letter-spacing would even work if you have just icons but I had a combination of three icons and a word, and the letter-spacing &#8230; <\/p>\n<p class=\"read-more-container\"><a title=\"Spacing in CSS pseudo-element content\" class=\"read-more button\" href=\"https:\/\/www.blindemanwebsites.com\/today-i-learned\/2019\/spacing-in-css-pseudo-element-content\/#more-479\" aria-label=\"Read more about Spacing in CSS pseudo-element content\">Read more<\/a><\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[17,36,18,37,35],"class_list":["post-479","post","type-post","status-publish","format-standard","hentry","category-new-things","tag-css","tag-html-symbols","tag-pseudo-elements","tag-spacing","tag-stack-overflow","infinite-scroll-item"],"_links":{"self":[{"href":"https:\/\/www.blindemanwebsites.com\/today-i-learned\/wp-json\/wp\/v2\/posts\/479","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.blindemanwebsites.com\/today-i-learned\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.blindemanwebsites.com\/today-i-learned\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.blindemanwebsites.com\/today-i-learned\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.blindemanwebsites.com\/today-i-learned\/wp-json\/wp\/v2\/comments?post=479"}],"version-history":[{"count":1,"href":"https:\/\/www.blindemanwebsites.com\/today-i-learned\/wp-json\/wp\/v2\/posts\/479\/revisions"}],"predecessor-version":[{"id":1100,"href":"https:\/\/www.blindemanwebsites.com\/today-i-learned\/wp-json\/wp\/v2\/posts\/479\/revisions\/1100"}],"wp:attachment":[{"href":"https:\/\/www.blindemanwebsites.com\/today-i-learned\/wp-json\/wp\/v2\/media?parent=479"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.blindemanwebsites.com\/today-i-learned\/wp-json\/wp\/v2\/categories?post=479"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.blindemanwebsites.com\/today-i-learned\/wp-json\/wp\/v2\/tags?post=479"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}