StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>You can use the Modernizr JavaScript library to detect browsers that don't support <code>:before</code> and <code>:after</code> (such as early versions of IE), and then use JavaScript to emulate those selectors. To download only the part of the library that you need, you can go to <a href="http://modernizr.com/download/#-generatedcontent-teststyles" rel="nofollow">this link</a> (the appropriate checkbox is already selected). Then, you can add two extra classes to your CSS that mimic the styles of <code>.divClassGreen:before</code> and <code>.divClassGreen:after</code>:</p> <pre><code>.divClassGreen:before, .divClassGreenBefore { /* blah */ } .divClassGreen:after, .divClassGreenAfter { /* more blah */ } </code></pre> <p>Finally, use JavaScript to add empty <code>div</code> tags before and after <code>.divClassGreen</code> (empty because you have <code>content: ''</code>) that have the styles <code>.divClassGreenBefore</code> and <code>.divClassGreenAfter</code>: </p> <pre><code>//If the browser doesn't support generated content (:before and :after) if (!Modernizr.generatedcontent) { var divClassGreen = document.getElementsByClassName("divClassGreen"); //returns a NodeList //Create the equivalents of :before and :after var divClassGreenBefore = document.createElement('div'); var divClassGreenAfter = document.createElement('div'); //Add the appropriate classes divClassGreenBefore.className = 'divClassGreenBefore'; divClassGreenAfter.className = 'divClassGreenAfter'; //Iterate through the NodeList, which adds the element before and after each .divClassGreen for (i = 0; i < divClassGreen.length; i++) { //Adds before divClassGreen[i].parentNode.insertBefore(divClassGreenBefore, divClassGreen[i]); //There's no insertAfter, so imitate it by using insertBefore on the hypothetical (next) sibling of divClassGreen divClassGreen[i].parentNode.insertBefore(divClassGreenAfter, divClassGreen[i].nextSibling); } } </code></pre>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload