Geek Answers Handbook

Is there a way to reset: after /: before CSS rules for an element?

Is there a way (reliably) to reset any possible CSS rules :after and :before for a newly created element?

Usually you can simply set the style rules that you want to use reset in the element directly (with !important if you want to be sure), but I don't know how to change the rules defined in :after only for the element.

(Only for Chrome, if at all possible.)

jsFiddle example .

Content added using :before / :after rules affects the value returned by clientHeight .

+2
source share
5 answers

There is a DOM2 API . The right way to do this is

 document.getOverrideStyle(p, ':after').display = 'none'; // or document.getOverrideStyle(p, ':after').cssText = 'display: none !important;';

Unfortunately, no browser has implemented it. ( Webkit returns null , Firefox does not have such a method ). CSS3 doesn't seem to even bother with this anymore, perhaps because usecases are very rare.

So, you will need to do some id / className magic, as suggested above , or in another thread

+7
source

I would simply assign the class name to new elements that have no contents :before / :after .

Example - http://jsfiddle.net/84kZK/1/

+2
source

Oh, okay. You can write new CSS that resets abusive pseudo-elements :before / :after :

 function resetPsuedo(el) { if (!el.id) el.id = makeId(); var selector = "#" + el.id; var head = document.getElementsByTagName('head')[0], style = document.createElement('style'), rules = document.createTextNode(selector + ":before, " + selector + ":after { content: '' }"); style.type = 'text/css'; if(style.styleSheet) style.styleSheet.cssText = rules.nodeValue; else style.appendChild(rules); head.appendChild(style); } function makeId() { var text = ""; var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz"; for (var i=0; i < 15; i++) text += possible.charAt(Math.floor(Math.random() * possible.length)); return text; }

Assigning a random identifier to the element you are passing into (if there is none) allows you to crack inline styles, instead of accessing el.beforeStyle , you can use the CSS selector: el#rkhjr828t9g:before .

You may need to add more rules for full reset styles. jsFiddle: see me!

http://www.w3.org/TR/CSS21/generate.html#before-after-content

The: before and: after elements pseudo-elements interact with other fields as if they were real elements inserted only inside their associated element.

For example, the following document fragment and style sheet:

 <p> Text </p> p:before { display: block; content: 'Some'; }

... will be displayed in exactly the same way as the following document fragment and stylesheet:

 <p><span>Some</span> Text </p> span { display: block }

Similarly, the following document fragment and stylesheet:

 <h2> Header </h2> h2:after { display: block; content: 'Thing'; }

... will be displayed in exactly the same way as the following document fragment and stylesheet:

 <h2> Header <span>Thing</span></h2> h2 { display: block; } span { display: block; }
+1
source

Use ruleSelector("ref::before")[0].style instead of document.getOverrideStyle(ref, ':before') .

http://jsfiddle.net/s3fv8e5v/4/

 <!DOCTYPE html> <title>CSS</title> <style> body { font: 200%/1.45 charter; } ref::before { content: '\00A7'; letter-spacing: .1em; } </style> <article>The seller can, under Business Law <ref>1782</ref>, offer a full refund to buyers. </article> <script> function ruleSelector(selector) { function uni(selector) { return selector.replace(/::/g, ':') // for Firefox } return Array.prototype.filter.call(Array.prototype.concat.apply([], Array.prototype.map.call(document.styleSheets, function(x) { return Array.prototype.slice.call(x.cssRules); })), function(x) { return uni(x.selectorText) === uni(selector); }); } var toggle = false, pseudo = ruleSelector("ref::before").slice(-1); document.querySelector("article").onclick = function() { pseudo.forEach(function(rule) { if (toggle = !toggle) rule.style.color = "red"; else rule.style.color = "black"; }); } </script>
0
source 
 //reference to this link:https://pankajparashar.com/posts/modify-pseudo-elements-css/ I wrote a demo and just modified the top attribute of ::before,here is the demo. <head> <meta charset="UTF-8"> <title>测试是否可以js修改伪类元素css yessssss</title> <style type="text/css"> .htmlbox_close::before, .htmlbox_close::after { content: ''; position: absolute; height: 2px; top: 4%; width: 3%; left: 2%; margin-top: -1px; background: #51aed9; height: 1.1%; } .htmlbox_close::before { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); } .htmlbox_close::after { -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); } </style> </head> <body> <div class="htmlbox_close"></div> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> var str = window.getComputedStyle($('.htmlbox_close')[0], '::before').getPropertyValue('top'); console.log(str); document.styleSheets[0].addRule('.htmlbox_close::before', 'top:100px'); document.styleSheets[0].insertRule('.htmlbox_close::before { top:100px }', 0); document.styleSheets[0].addRule('.htmlbox_close::after', 'top:100px'); document.styleSheets[0].insertRule('.htmlbox_close::before { top:100px }', 0); var str = window.getComputedStyle($('.htmlbox_close')[0], '::before').getPropertyValue('top'); console.log(str); </script> </body>
-one
source

More articles:


All Articles