如何使用js添加多个样式规则到css伪元素

How to add multiple style rules to css pseudo elements using js?

本文关键字：规则 css 元素 样式 何使用 js 添加      更新时间：2023-09-26

我有以下html, css和js

<a href="#" class="name">name</a>
CSS

a {
    position: relative;
}

JS 

var styleString = 'content:" ";, width: 0, height: 0;, border-style: solid;, border-width: 100px 100px 0 100px;, border-color: #007bff transparent transparent transparent;, position: absolute;';
document.styleSheets[0].addRule('.name:after', styleString);

我的问题只是内容:"被添加，其余的规则是缺失的。我的代码有什么问题?

正如@MoshFeu已经指出的，每个;后面的逗号是不必要的，应该删除:

完整代码:

var styleString = 'content:" "; width: 0; height: 0; border-style: solid; border-width: 100px 100px 0 100px; border-color: #007bff transparent transparent transparent; position: absolute;';
document.styleSheets[0].addRule('.name:after', styleString);
相关文章：