{"id":2980,"date":"2013-09-03T20:12:04","date_gmt":"2013-09-04T02:12:04","guid":{"rendered":"http:\/\/bililite.com\/blog\/?p=2980"},"modified":"2013-09-03T20:12:04","modified_gmt":"2013-09-04T02:12:04","slug":"fun-with-before-and-after","status":"publish","type":"post","link":"https:\/\/bililite.com\/blog\/2013\/09\/03\/fun-with-before-and-after\/","title":{"rendered":"Fun with <code>::before<\/code> and <code>::after<\/code>"},"content":{"rendered":"<p>I've <a href=\"http:\/\/bililite.com\/blog\/2012\/08\/02\/understanding-before-and-after\/\" title=\"Understanding :before and :after\">noted in the past <\/a> that the CSS pseudoelements represent inserted content in the element (i.e. <code class=\"language-css\" >span::before<\/code> refers to a virtual element inserted within the <code class=\"language-html\" >&lt;span&gt;<\/code> <em>before<\/em> the rest of its contents, not to content that is inserted before the <code class=\"language-html\" >&lt;span&gt;<\/code> itself. That makes it useful for things like decorative guillemets for next and prev links ( <code class=\"language-css\" >a[rel=next]::before { content: '\u00ab '; } a[rel=prev]::after { content: ' \u00bb'; }<\/code> ) (note using <a href=\"http:\/\/www.w3.org\/html\/wg\/drafts\/html\/master\/links.html#linkTypes\"><code class=\"language-html\" >rel<\/code><\/a> rather than classes to keep everything really semantic).<\/p>\n<p>But you can insert content even in elements that can't have content, like <code class=\"language-html\" >&lt;hr&gt;<\/code>. See the last two examples on <a href=\"http:\/\/css-tricks.com\/examples\/hrs\/\">CSS tricks<\/a>; especially the last one that sticks a glyph in the middle of the horizonal rule:<\/p>\n<pre><code class=\"language-css\" >hr {\r\n    text-align: center;\r\n}\r\nhr::after {\r\n    content: \"\u00a7\";\r\n    display: inline-block;\r\n    position: relative; \r\n    top: -0.7em;  \r\n    font-size: 1.5em;\r\n    padding: 0 0.25em;\r\n    background: white;\r\n}<\/code><\/pre>\n<p>Or you can use the pseudoelement to create <a href=\"http:\/\/www.lovethe.info\/html-and-css-tutorials\/how-to-increase-underline-gap-on-hyperlinks\">custom underlines<\/a>. <code class=\"language-css\" >text-decoration: underline<\/code> gives a solid underline in the text color. <code class=\"language-css\" >border-bottom<\/code> gives far more options, but is generally too far away from the text for my taste. You can <em>increase<\/em> the distance with <code class=\"language-css\" >padding-bottom<\/code> but you can't use negative values to decrease it. Instead, use a full-width <code class=\"language-css\" >::after<\/code> element with a bottom border, and move that:<\/p>\n<pre><code class=\"language-css\" >a{\r\n     position: relative;\r\n     text-decoration: none;\r\n}\r\na::after{\r\n     position: absolute;\r\n     left: 0px;\r\n     bottom: 6px; \/* or whatever looks right *\/\r\n     content: '';\r\n     width: 100%;\r\n     border-bottom: 1px dotted green\r\n}<\/code><\/pre>\n<p>Or for numbering paragraphs, use a CSS counter with the <code class=\"language-css\" >::before<\/code> element (this is what I used for  my <a href=\"http:\/\/bililite.com\/blog\/2012\/08\/05\/line-numbering-in-pre-elements\/\" title=\"Line Numbering in \n\n<pre> Elements\">line numbering function<\/a>, and for numbering quotes on <a href=\"http:\/\/kavanot.me\/%D7%A4%D7%A8%D7%A9%D7%AA+%D7%A0%D7%A6%D7%91%D7%99%D7%9D-%D7%95%D7%99%D7%9C%D7%9A+%D7%AA%D7%A9%D7%A2%D7%B4%D7%92\/\">kavanot.me<\/a>):<\/p>\r\n<pre><code class=\"language-css\" >p {\r\n\tmargin-left: 10em;\r\n\tposition: relative;\r\n\tcounter-increment: p-counter;\r\n}\r\np::before {\r\n\tcontent: counter(p-counter);\r\n\tfont-weight: bold;\r\n\tposition: absolute;\r\n\tleft: -2em;\r\n}<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>I've noted in the past that the CSS pseudoelements represent inserted content in the element (i.e. span::before refers to a virtual element inserted within the &lt;span&gt; before the rest of its contents, not to content that is inserted before the &lt;span&gt; itself. That makes it useful for things like decorative guillemets for next and prev [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[20],"tags":[],"_links":{"self":[{"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/posts\/2980"}],"collection":[{"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/comments?post=2980"}],"version-history":[{"count":9,"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/posts\/2980\/revisions"}],"predecessor-version":[{"id":3029,"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/posts\/2980\/revisions\/3029"}],"wp:attachment":[{"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/media?parent=2980"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/categories?post=2980"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/tags?post=2980"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}