js如何修改伪类样式如before或after_在vue中用js修改::before样式

概括

通过js创建一个内嵌样式表，并添加需要修改的伪类样式，覆盖原始的伪类样式。

介绍

html代码

<ul>
　　<li>apple</li>
　　<li>banana</li>
　　<li>pear</li>
</ul>

css代码

ul li{
    list-style: none;
}
li:before{
    content:"·";
}

实现截图：

js修改before样式：

let style = document.createElement(`style`);        // 创建<style></style>标签
let text = document.createTextNode(`ul li:nth-child(1):before{content:"*";}`);    // 添加伪类样式
style.appendChild(text);                            // 把伪类样式添加样式表
document.body.appendChild(style);

修改后截图：

上面操作执行完后，就会在HTML页面头部多出来了一个内嵌样式表，即<style> // 伪类样式 </style>，里面包含了修改好的伪类样式。如下图所示：

Demo 

（完）