Home  >  Article  >  Web Front-end  >  How to Dynamically Alter the Width of a :before Pseudo-Element using jQuery?

How to Dynamically Alter the Width of a :before Pseudo-Element using jQuery?

Susan Sarandon
Susan SarandonOriginal
2024-11-10 11:46:02884browse

How to Dynamically Alter the Width of a :before Pseudo-Element using jQuery?

Altering :before CSS Selectors Width using JQuery

In order to dynamically set the width of the :before pseudo-element, you can append a new style element to the document's head.

JQuery Code:

$('head').append('<style>.column:before{width:800px !important;}</style>');

Explanation:

  • $('head') selects the element of the HTML document.
  • .append() method adds the new style element to the element.
  • Inside the style element, we set the width property of the .column:before selector to 800 pixels, overriding the original width.

Note:

  • The !important declaration is used to ensure that the new width overrides any previously set styles.
  • It's worth noting that there are no direct jQuery methods to modify the rules of a pseudo-class. The provided solution involves modifying the CSS stylesheet.

This technique allows you to dynamically change the width of elements with the :before pseudo-element, while leaving elements without it unaffected.

The above is the detailed content of How to Dynamically Alter the Width of a :before Pseudo-Element using jQuery?. For more information, please follow other related articles on the PHP Chinese website!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn