{"id":304,"date":"2013-11-02T00:08:32","date_gmt":"2013-11-02T00:08:32","guid":{"rendered":"http:\/\/www.advancedwebhelp.com\/blog\/?p=304"},"modified":"2013-11-02T04:25:01","modified_gmt":"2013-11-02T04:25:01","slug":"how-can-i-use-cssbefore-to-add-new-line","status":"publish","type":"post","link":"https:\/\/www.advancedwebhelp.com\/blog\/2013\/how-can-i-use-cssbefore-to-add-new-line","title":{"rendered":"How can I use CSS:before to add new line"},"content":{"rendered":"<p><a href=\"http:\/\/www.advancedwebhelp.com\/blog\/wp-content\/uploads\/2013\/11\/css.png\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-332 alignright\" style=\"margin-top: -10px ;\" alt=\"CSS logo\" src=\"http:\/\/www.advancedwebhelp.com\/blog\/wp-content\/uploads\/2013\/11\/css.png\" width=\"200\" height=\"180\" srcset=\"https:\/\/www.advancedwebhelp.com\/blog\/wp-content\/uploads\/2013\/11\/css.png 200w, https:\/\/www.advancedwebhelp.com\/blog\/wp-content\/uploads\/2013\/11\/css-148x133.png 148w, https:\/\/www.advancedwebhelp.com\/blog\/wp-content\/uploads\/2013\/11\/css-31x27.png 31w, https:\/\/www.advancedwebhelp.com\/blog\/wp-content\/uploads\/2013\/11\/css-38x34.png 38w\" sizes=\"auto, (max-width: 200px) 100vw, 200px\" \/><\/a>How can I use CSS:before to add newline before an element???<\/p>\n<p>That is the question that I researched today. My answer was semi-satisfying. I found that you can, and can&#8217;t do it &#8230; kinda.<\/p>\n<p>What does that mean? Well, the intuitively obvious ways don&#8217;t work. The CSS method I did find will work on all browsers except the wonderful IE browser. What else in new! Love you IE &#8230;<\/p>\n<p>In my situation, I wanted to customize where a link (&lt;a&gt;) was sitting. It was embedded in generated text I couldn&#8217;t touch. I wanted the link on the next line to highlight its existence.<\/p>\n<p>I tried several things that didn&#8217;t work and wasn&#8217;t surprised by the results:<\/p>\n<ul>\n<li><label>Adding &#8216; a { display: block ; } &#8216;<\/label> does not work, not a surprise.<\/li>\n<li><label>Adding &#8216; a:before {content: &#8220;&lt;br\/&gt;&#8221; ; } &#8216;<\/label> doesn&#8217;t work, the content is processed as text, not as a tag.<\/li>\n<li><label>Adding &#8216; a:before {content: &#8220;\\n&#8221; ; } &#8216;<\/label> failed as badly as the others &#8230; not a surprise.<\/li>\n<\/ul>\n<p>What surprised me was the following works, on browsers other than IE:<\/p>\n<ul>\n<li style=\"list-style-type: none;\"><label> a:before {content: &#8220;\\\\A&#8221; ; white-space: pre-wrap ; }<\/label><\/li>\n<\/ul>\n<p>There is no CSS solution, but, there is a jQuery solution. Try jQuery:<\/p>\n<ul>\n<li style=\"list-style-type: none;\">$(&#8220;&lt;br\/&gt;&#8221;).insertbefore(&#8220;a&#8221;)<\/li>\n<\/ul>\n<p><script type=\"text\/javascript\">\/\/ <![CDATA[\n   $(\"\n\").insertbefore(\"a\") ;\n\/\/ ]]><\/script><\/p>\n","protected":false},"excerpt":{"rendered":"<p>How can I use CSS:before to add newline before an element??? That is the question that I researched today. My answer was semi-satisfying. I found that you can, and can&#8217;t do it &#8230; kinda. What does that mean? Well, the intuitively obvious ways don&#8217;t work. The CSS method I did find will work on all [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3,4,13],"tags":[],"class_list":["post-304","post","type-post","status-publish","format-standard","hentry","category-css","category-html5","category-jquery"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.advancedwebhelp.com\/blog\/wp-json\/wp\/v2\/posts\/304","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.advancedwebhelp.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.advancedwebhelp.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.advancedwebhelp.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.advancedwebhelp.com\/blog\/wp-json\/wp\/v2\/comments?post=304"}],"version-history":[{"count":2,"href":"https:\/\/www.advancedwebhelp.com\/blog\/wp-json\/wp\/v2\/posts\/304\/revisions"}],"predecessor-version":[{"id":331,"href":"https:\/\/www.advancedwebhelp.com\/blog\/wp-json\/wp\/v2\/posts\/304\/revisions\/331"}],"wp:attachment":[{"href":"https:\/\/www.advancedwebhelp.com\/blog\/wp-json\/wp\/v2\/media?parent=304"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.advancedwebhelp.com\/blog\/wp-json\/wp\/v2\/categories?post=304"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.advancedwebhelp.com\/blog\/wp-json\/wp\/v2\/tags?post=304"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}