jQuery无法修改li:before伪元素边框颜色的问题求助

Ah, I see the issue here! Pseudo-elements like :before aren't actual DOM nodes—they're generated entirely by CSS, so jQuery can't target them directly with a selector. That's why your initial code didn't work. Let's walk through three reliable solutions to update that border color:

1. Use CSS Class Swaps (Recommended) #

This is the cleanest approach because it keeps your styles in CSS where they belong, and uses jQuery only to toggle state.

First, define a new CSS class that overrides the border color:

/* Original style */
.multi-steps > li:before {
  border-color: #ffb22b;
}

/* New style for the modified state */
.multi-steps > li.active-step:before {
  border-color: #007bff;
}

Then use jQuery to add this class to your target <li> elements:

// Add the class to activate the new border color
$('.multi-steps > li').addClass('active-step');

// To revert back, remove the class
// $('.multi-steps > li').removeClass('active-step');

2. Use CSS Custom Properties (Variables) #

If you need to dynamically set the color (instead of just toggling a pre-defined state), CSS variables are a flexible option.

First, update your original CSS to use a variable:

.multi-steps > li:before {
  /* Use a variable with a default value */
  border-color: var(--step-border-color, #ffb22b);
}

Then use jQuery to set the variable on the parent <li> element:

// Update the variable value to change the border color
$('.multi-steps > li').css('--step-border-color', '#007bff');

// To reset to the default, remove the variable
// $('.multi-steps > li').css('--step-border-color', '');

The pseudo-element will automatically inherit the variable value from its parent <li>.

3. Dynamically Inject a Style Tag (Last Resort) #

This method directly adds new CSS to the page, which works but is less maintainable than the above options. Use it only if the first two approaches don't fit your use case:

// Append a new style block to the head to override the pseudo-element style
$('head').append(`
  <style>
    .multi-steps > li:before {
      border-color: #007bff !important;
    }
  </style>
`);

Note: The !important flag may be needed to override existing styles, but try to avoid it if possible—it can make debugging style conflicts harder later.

内容的提问来源于stack exchange，提问作者Infy