如何使用 jQuery 动态更改 :before 伪元素的宽度？-css教程-PHP中文网

如何使用 jQuery 动态更改 :before 伪元素的宽度？

Linda Hamilton

发布： 2024-11-12 06:27:02

原创

432 人浏览过

How can I dynamically change the width of a :before pseudo-element using jQuery?

通过JQuery动态修改:before CSS选择器的宽度

在Web开发中，你可能会遇到动态内容需要调整样式的场景像 :before 这样的伪元素。要使用流行的 javascript 库 JQuery 实现此目的，请按照以下步骤操作：

首先，假设以下 CSS 规则：

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

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

登录后复制

现在，设置 :before 伪值的 width 属性-使用 JQuery 的元素，您可以将新的样式元素附加到文档的头部：

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

登录后复制

这会添加一个新的 CSS 规则，该规则会覆盖初始宽度设置。重要提示是使用 "!important" 来确保新规则优先于现有规则。

有关现场演示，请参阅此 URL：[现场演示链接]

虽然此方法并非特定于 :before 伪元素，但它允许您动态修改其宽度或其他 CSS 属性。

以上是如何使用 jQuery 动态更改 :before 伪元素的宽度？的详细内容。更多信息请关注PHP中文网其他相关文章！