{"id":1258,"date":"2011-08-10T07:54:12","date_gmt":"2011-08-10T07:54:12","guid":{"rendered":"https:\/\/2011.sf.wordcamp.org\/?post_type=wcb_session&#038;p=1258"},"modified":"2012-11-21T10:25:32","modified_gmt":"2012-11-21T10:25:32","slug":"css-pseudo-elements-for-fun-and-profit","status":"publish","type":"wcb_session","link":"https:\/\/sf.wordcamp.org\/2011\/session\/css-pseudo-elements-for-fun-and-profit\/","title":{"rendered":"CSS Pseudo Elements for Fun and Profit!"},"content":{"rendered":"<p>What if for every HTML element on the page, you got two free ones? That&#8217;s what you get with the CSS pseudo elements ::before and ::after. You can use them as canvases to do all kinds of neat and practical design effects. We&#8217;ll cover how to use them and loads of real world examples.<\/p>\n<p><iframe title=\"VideoPress Video Player\" aria-label='VideoPress Video Player' width='610' height='343' src='https:\/\/video.wordpress.com\/embed\/sfiCtGNs?hd=1&amp;cover=1' frameborder='0' allowfullscreen allow='clipboard-write'><\/iframe><script src='https:\/\/v0.wordpress.com\/js\/next\/videopress-iframe.js?m=1674852142'><\/script><\/p>\n<p>&nbsp;<\/p>\n<p>Check out Chris&#8217; slides.<br \/>\n<a href='https:\/\/2011.sf.wordcamp.org\/files\/2011\/09\/WordCampSF2011-Pseudos.pdf'>CSS3 Pseudo Elements for Fun and Profit<\/a><\/p>\n<p><strong>About the Speaker:<br \/>\n<\/strong><a href=\"https:\/\/2011.sf.wordcamp.org\/speakers\/#chris-coyier\">Chris<\/a> is a web designer currently working for\u00a0<a href=\"http:\/\/wufoo.com\/\">Wufoo<\/a>, an online form building service. He runs the web design blog and community site\u00a0<a href=\"http:\/\/css-tricks.com\/\">CSS-Tricks<\/a>. He co-authored the book and blog\u00a0<a href=\"http:\/\/digwp.com\/\">Digging Into WordPress<\/a>. He like banjos, artichokes, and serial sci-fi television shows.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>What if for every HTML element on the page, you got two free ones? That&#8217;s what you get with the CSS pseudo elements ::before and ::after. You can use them as canvases to do all kinds of neat and practical&hellip;<\/p>\n","protected":false},"author":903128,"featured_media":0,"template":"","meta":{"_crdt_document":"","jetpack_post_was_ever_published":false,"_wcpt_session_time":0,"_wcpt_session_duration":3000,"_wcpt_session_type":"","_wcpt_session_slides":"","_wcpt_session_video":"","_wcpt_speaker_id":[960],"footnotes":""},"session_track":[7391],"session_category":[],"class_list":["post-1258","wcb_session","type-wcb_session","status-publish","hentry","wcb_track-designers-and-developers"],"jetpack_shortlink":"https:\/\/wp.me\/p1vvip-ki","jetpack_sharing_enabled":true,"session_date_time":{"date":"","time":""},"session_speakers":[{"id":"960","slug":"chris-coyier","name":"Chris Coyier","link":"https:\/\/sf.wordcamp.org\/2011\/speaker\/chris-coyier\/"}],"session_cats_rendered":null,"_links":{"self":[{"href":"https:\/\/sf.wordcamp.org\/2011\/wp-json\/wp\/v2\/sessions\/1258","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sf.wordcamp.org\/2011\/wp-json\/wp\/v2\/sessions"}],"about":[{"href":"https:\/\/sf.wordcamp.org\/2011\/wp-json\/wp\/v2\/types\/wcb_session"}],"version-history":[{"count":9,"href":"https:\/\/sf.wordcamp.org\/2011\/wp-json\/wp\/v2\/sessions\/1258\/revisions"}],"predecessor-version":[{"id":3796,"href":"https:\/\/sf.wordcamp.org\/2011\/wp-json\/wp\/v2\/sessions\/1258\/revisions\/3796"}],"speakers":[{"embeddable":true,"href":"https:\/\/sf.wordcamp.org\/2011\/wp-json\/wp\/v2\/speakers\/960"}],"author":[{"embeddable":true,"href":"https:\/\/sf.wordcamp.org\/2011\/wp-json\/wporg\/v1\/users\/jenmylo"}],"wp:attachment":[{"href":"https:\/\/sf.wordcamp.org\/2011\/wp-json\/wp\/v2\/media?parent=1258"}],"wp:term":[{"taxonomy":"wcb_track","embeddable":true,"href":"https:\/\/sf.wordcamp.org\/2011\/wp-json\/wp\/v2\/session_track?post=1258"},{"taxonomy":"wcb_session_category","embeddable":true,"href":"https:\/\/sf.wordcamp.org\/2011\/wp-json\/wp\/v2\/session_category?post=1258"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}