{"id":1794,"date":"2019-04-09T05:42:37","date_gmt":"2019-04-09T03:42:37","guid":{"rendered":"https:\/\/pythonprogramming.altervista.org\/?p=1794"},"modified":"2019-04-09T05:45:56","modified_gmt":"2019-04-09T03:45:56","slug":"css-before-and-after","status":"publish","type":"post","link":"https:\/\/pythonprogramming.altervista.org\/css-before-and-after\/","title":{"rendered":"CSS: ::before and ::after"},"content":{"rendered":"<p><a href=\"http:\/\/javascript2000.altervista.org\/css-before-and-after\/css-beforeafter-0\/\" rel=\"attachment wp-att-151\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-151\" src=\"http:\/\/javascript2000.altervista.org\/wp-content\/uploads\/2019\/04\/css-beforeafter-0.jpg\" alt=\"\" width=\"510\" height=\"310\" \/><\/a><\/p>\n<p>Read <a href=\"https:\/\/zendev.com\/2019\/03\/28\/cool-uses-of-before-after-pseudoelements.html\">this interesting article<\/a> about ::before and ::after. What are they? How can you use them? There are some really cool examples in this post of zendev.com and I encourage you to give it a try while you are busy with all the project you have in mind, because it can you some ideas to do very interesting new stuffs in your web page to animate your content and make them more meaningful and actractive.<\/p>\n<p><a href=\"https:\/\/zendev.com\/2019\/03\/28\/cool-uses-of-before-after-pseudoelements.html\">::before and ::after &#8211; Make the web page nicer and exciting<\/a><\/p>\n<p><button class=\"shiny\"><a href=\"https:\/\/zendev.com\/2019\/03\/28\/cool-uses-of-before-after-pseudoelements.html\">::before and ::after &#8211; Make the web page nicer and exciting<\/a><\/button><\/p>\n<script>\r\nlet title = \"CSS\";\r\nlet links = [\r\n\t[\"css-before-and-after\/\",\"CSS: before and after\"]\t\r\n];\r\n<\/script>\r\n\r\n\r\n<script>\r\nvar next2 = 0;\r\n\thtml = \"<b style='color:coral;font-size:2em'>Other posts about \" + title + \"<\/b>\";\r\nfor (address of links) \r\n{\r\n\tif (next2 == 1){\r\n\t\thtml += \"<div style='background:coral'>\";\r\n\t\thtml += \"Next link => <a href='https:\/\/pythonprogramming.altervista.org\/\" + address[0] + \"'>\" + address[1] + \"<\/a>\";\r\n\t\thtml += \"<\/div><br>\";\r\n\t\tnext2 = 0;\r\n\t}\r\n\tif (\"https:\/\/pythonprogramming.altervista.org\/\"+ address[0] == document.URL) {\r\n\t\tnext2 = 1;\r\n\t}\r\n}\r\n\r\nlet next = 0;\r\nlet addressStart = \"<a href='https:\/\/pythonprogramming.altervista.org\/\";\r\nfor (address of links) {\r\n\tif (next == 1){\r\n\t\thtml += \">>>\" + addressStart + address[0] + \"'>\" + address[1] + \"<\/a><br>\";\r\n\t\tnext = 0;\r\n\t}\r\n\telse if (addressStart + address[0] != document.URL)\r\n\t{\r\n\t\thtml += addressStart + address[0] + \"'>\" + address[1] + \"<\/a><br>\";\r\n\t}\r\n\telse\r\n\t{\r\n\t\tnext = 1;\r\n\t\tnext_address = address[0]\r\n\t\tnext_title = address[1]\r\n\t\thtml += \"<span style='color:gray'>\" + address[1] + \"<\/span><br>\";\r\n\t}\r\n\r\n}\r\n\r\n\thtml += `<span style=\"font-size:8px\">Powered by <a href=\"https:\/\/pythonprogramming.altervista.org\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-2673\" src=\"https:\/\/pythonprogramming.altervista.org\/wp-content\/uploads\/2019\/06\/altervista2.png\" alt=\"\" width=\"70\" height=\"25\" srcset=\"https:\/\/pythonprogramming.altervista.org\/wp-content\/uploads\/2019\/06\/altervista2.png 156w, https:\/\/pythonprogramming.altervista.org\/wp-content\/uploads\/2019\/06\/altervista2-150x56.png 150w\" sizes=\"auto, (max-width: 70px) 100vw, 70px\" \/>pythonprogramming.altervista.org<\/a><\/span>`\r\n\thtml = \"<div style='background:yellow'>\" + html + \"<\/div>\";\r\n\tdocument.write(html)\r\n<\/script>\r\n\n","protected":false},"excerpt":{"rendered":"How to use before and after in css\n<a class=\"moretag\" href=\"https:\/\/pythonprogramming.altervista.org\/css-before-and-after\/\"> [...]<\/a>","protected":false},"author":1,"featured_media":1797,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_crdt_document":"","footnotes":""},"categories":[355],"tags":[358,357,356],"class_list":["post-1794","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css","tag-after","tag-before","tag-css"],"avopt_banners_inside_post":true,"avopt_banners_on_page":true,"av_copy_from":"","av_sharing_message":"","av_sharing_allowed":false,"av_sharing_on":{"fb":[],"tw":[]},"av_allow_affiliate_banner":false,"av_allow_affiliate_multi_banner":false,"av_show_affiliation_buy_button":false,"av_post_rating":true,"av_have_post_rating_value":false,"av_is_artificial_intelligence_content":false,"_links":{"self":[{"href":"https:\/\/pythonprogramming.altervista.org\/wp-json\/wp\/v2\/posts\/1794","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pythonprogramming.altervista.org\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/pythonprogramming.altervista.org\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/pythonprogramming.altervista.org\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/pythonprogramming.altervista.org\/wp-json\/wp\/v2\/comments?post=1794"}],"version-history":[{"count":3,"href":"https:\/\/pythonprogramming.altervista.org\/wp-json\/wp\/v2\/posts\/1794\/revisions"}],"predecessor-version":[{"id":1799,"href":"https:\/\/pythonprogramming.altervista.org\/wp-json\/wp\/v2\/posts\/1794\/revisions\/1799"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/pythonprogramming.altervista.org\/wp-json\/wp\/v2\/media\/1797"}],"wp:attachment":[{"href":"https:\/\/pythonprogramming.altervista.org\/wp-json\/wp\/v2\/media?parent=1794"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/pythonprogramming.altervista.org\/wp-json\/wp\/v2\/categories?post=1794"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/pythonprogramming.altervista.org\/wp-json\/wp\/v2\/tags?post=1794"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}