Style Pseudo-elements with Javascript Using Custom Properties

Over at CSS { In Real Life }, author Michelle Barker has detailed a clever way to style pseudo-elements (such as ::before and ::after) through JavaScript. In Javascript we have a few ways of selecting elements, but we can’t directly target pseudo-elements. […] Luckily, CSS custom properties can help. ? If you set a custom …


This content originally appeared on Bram.us and was authored by Bramus!

Over at CSS { In Real Life }, author Michelle Barker has detailed a clever way to style pseudo-elements (such as ::before and ::after) through JavaScript.

In Javascript we have a few ways of selecting elements, but we can’t directly target pseudo-elements. […] Luckily, CSS custom properties can help.

? If you set a custom property on the element that “owns” the pseudo-element the pseudo-element itself can pick it up, thus enabling a way to style it.

Quick Tip: Style Pseudo-elements with Javascript Using Custom Properties →


This content originally appeared on Bram.us and was authored by Bramus!


Print Share Comment Cite Upload Translate Updates
APA

Bramus! | Sciencx (2021-04-01T21:42:12+00:00) Style Pseudo-elements with Javascript Using Custom Properties. Retrieved from https://www.scien.cx/2021/04/01/style-pseudo-elements-with-javascript-using-custom-properties/

MLA
" » Style Pseudo-elements with Javascript Using Custom Properties." Bramus! | Sciencx - Thursday April 1, 2021, https://www.scien.cx/2021/04/01/style-pseudo-elements-with-javascript-using-custom-properties/
HARVARD
Bramus! | Sciencx Thursday April 1, 2021 » Style Pseudo-elements with Javascript Using Custom Properties., viewed ,<https://www.scien.cx/2021/04/01/style-pseudo-elements-with-javascript-using-custom-properties/>
VANCOUVER
Bramus! | Sciencx - » Style Pseudo-elements with Javascript Using Custom Properties. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/04/01/style-pseudo-elements-with-javascript-using-custom-properties/
CHICAGO
" » Style Pseudo-elements with Javascript Using Custom Properties." Bramus! | Sciencx - Accessed . https://www.scien.cx/2021/04/01/style-pseudo-elements-with-javascript-using-custom-properties/
IEEE
" » Style Pseudo-elements with Javascript Using Custom Properties." Bramus! | Sciencx [Online]. Available: https://www.scien.cx/2021/04/01/style-pseudo-elements-with-javascript-using-custom-properties/. [Accessed: ]
rf:citation
» Style Pseudo-elements with Javascript Using Custom Properties | Bramus! | Sciencx | https://www.scien.cx/2021/04/01/style-pseudo-elements-with-javascript-using-custom-properties/ |

Please log in to upload a file.




There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.