CSS pseudo-elements: before and: After can achieve a lot of interesting features, our project used in the Ionicframework framework of the Ionic.css file used in a large number of these 2 pseudo-elements. Pseudo-elements can be used to define styles, but unlike normal DOM elements, there is no way to select these pseudo-elements, and we cannot modify them as normal elements.
In this HTML we have used: before and: After has added Target-before and target-after to the content before and after. If we want to achieve this function: when clicking on the button, turn the Target-before and target-after into the corresponding color. At this point we need to modify the styles defined in the pseudo-elements.
There is no way to directly select a pseudo-element to modify its style, only by adding a pseudo-element to overwrite the previous pseudo-element's style.
each time we click on the button, we append: After and: Before style (change the text color), so as to achieve the purpose of changing the pseudo-element style.function ChangeColor (COLORRGB) {$ (' <style type= ' text/css ' id= ' dynamic-before '/> '). AppendTo ("Head"); $ ("< Style type= ' text/css ' id= ' dynamic-after '/> '). AppendTo ("Head"); $ ("#dynamic-before"). Text (". content:before{ color:# "+ colorrgb+";} "); $ ("#dynamic-after"). Text (". content:after{color:#" + colorrgb+ ";}");
The above practice directly writes CSS in the JS file, is not generally recommended practice. We can pre-define the desired style in the CSS file, and then modify the class in JS to match the new style.
It's also worth noting that if we just need to modify the content property of a pseudo-element, there's a simpler, more elegant way to implement it. You can use the attr function, which is supported by the content property of pseudo-elements.
<style>.ribbon:before { display:block; CONTENT:ATTR (ribbon); Background: #eee;} . ribbon:after { display:block; Content: ""; border-left:5px dotted transparent; border-top:5px solid #ccc; height:0; width:0;} /*** non-functional apperance Styles ***/div.ribbon {margin:20px; float:left; font-size:11px; font-family:arial;} Div.ribbon:before {padding:2px 3px;} </style><script>window.onload = function () {document.getElementById (' Attrtext '). AddEventListener (' KeyUp ', function () {document.getElementById (' ribbon '). SetAttribute (' ribbon ', This.value);}); </script><body><div>ribbonelement.setattribute (' ribbon ', <input id= "AttrText" type= "text"/ >) </div><div id= "Ribbon" class= "Ribbon" ribbon= "I am a CSS Ribbon" ></div></body>
Reference article:Http://www.28im.com/css/a937345.html
http://www.backalleycoder.com/2012/08/09/mvcr-minimum-viable-css-ribbon/
Copyright NOTICE: This article for Bo Master original article, without Bo Master permission not reproduced.
JavaScript modifies CSS pseudo-elements: after and: Before Styles
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
