如何使用 jQuery 动态调整 CSS `:before` 选择器的宽度？

使用 jQuery 的 CSS :before 选择器的动态宽度调整

目标： 修改用 :before CSS 选择器装饰的元素的宽度属性，特别是当它遵循特定的类名时。

场景：考虑以下CSS：

.column:before {
    width: 300px;
    float: left;
    content: "";
    height: 430px;
}

.column {
    width: 500px;
    float: right;
    padding: 5px;
    overflow: hidden;
    text-align: justify;
}

任务：改变宽度属性使用 jQuery 与 .column 类关联的 :before 选择器，不会影响没有 :before 规则的元素。

解决方案：

如给定答案中所述，jQuery本身不支持直接修改伪类规则。但是，您可以通过动态地将新的样式元素附加到文档的头部来规避此限制：

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

这将为 .column 类中的 :before 选择器分配 800px 的固定宽度。请注意，!important 声明会覆盖任何现有样式。

或者，您可以使用专门为修改 CSS 伪类规则而设计的插件。虽然没有特定的插件推荐，但在网络上搜索“jQuery 伪类操作”应该会产生合适的结果。

以上是如何使用 jQuery 动态调整 CSS `:before` 选择器的宽度？的详细内容。更多信息请关注PHP中文网其他相关文章！