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

Question

我有以下html，css和js

HTML

<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);

DEMO

我的问题只是内容：“”正在添加，其余的规则都缺失了。我的代码有什么问题？

Answer 1

正如@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);