相关疑难解决方法(0)

有没有办法使用jQuery 选择/操作CSS伪元素,如::before和::after(以及带有一个分号的旧版本)？

例如,我的样式表具有以下规则:

.span::after{ content:'foo' }

如何使用jQuery将'foo'更改为'bar'？

我的代码是:

p {
    position: relative;
    background-color: blue;
}

p:before {
    content: '';
    position: absolute;
    left:100%;
    width: 10px;
    height: 100%;
    background-color: red;
}

请看这个小提琴:http://jsfiddle.net/ZWw3Z/5/

我想仅在伪元素(红色位)上触发click事件.也就是说,我不希望在蓝色位上触发click事件.

我有一个div带有CSS伪元素的元素::before用作关闭按钮(而不是使用实际按钮).我该如何申请一个事件监听器只伪元素？

HTML

<div id="box"></div>

CSS

#box:before
{
 background-image: url(close.png);
 content: '';
 display: block; 
 height: 20px;
 position: absolute;
 top: -10px;
 right: -10px; 
 width: 20px;
}

#box
{
 height: 100px;
 width: 100px;
}

我有一个元素,其:before样式必须根据计算进行修改.

export class Content extends React.Component {
    render() {
        return (
            <div className="ring-base">
               <div className="ring-left" style={{/* Change here */}}></div>
               <div className="ring-right" style={{/* Change here */}}></div>
               <div className="ring-cover">
                   <div className="ring-text">10%</div>
               </div>
            </div>
        );
    }
}

CSS代码:

.ring-base {
    position: absolute;
    height: 200px;
    width: 200px;
    border-radius: 50%;
    background: red;
    transform: rotate(90deg);
    overflow:hidden;
}
.ring-cover {
    position: absolute;
    height: 180px;
    width: 180px;
    background: #fff;
    border-radius: 50%;
    top: 5%;
    left: 5%;
}

.ring-cover .ring-text {
    position: absolute;

    width: 100%;
    height: 100%;
    text-align: …