jquery - 如何使用css创建圆形加减号？

Question

我有以下代码，其中有加号和减号图像来显示切换，如何使这个纯基于 CSS 的加号和减号是粗体和圆形而不是基于图像。

HTML

<div class="toggle">
Show and hide < plus minus icon will show here> 
</div>

CSS

toggle{
    display:inline-block;
    /*height:48px;
    width:48px;*/
    background:url("http://icons.iconarchive.com/icons/pixelmixer/basic/48/plus-icon.png") no-repeat scroll 183px 0 transparent
}
.toggle:after{
    content:"View All";
    display:block;
    height:48px;
    line-height:48px;
    width:288px;
    margin-left:48px;

}
.toggle.expanded:after{
     content:"Close All ";
}
.toggle.expanded {
  background:url("http://cdn2.iconfinder.com/data/icons/onebit/PNG/onebit_32.png") no-repeat scroll 183px 0 ;

}

JQUERY

$(document).ready(function() {
  var $content = $("div.moreinfo").hide();

  $(".toggle").on("click", function(e) {
     $(this).toggleClass("expanded");
     if ($(this).hasClass('expanded')) {
        $("div.plus").hide().removeClass("closed");
        $("div.minus").show().addClass("opened");
        e.preventDefault();
     } else {
        $("div.plus").show().addClass("closed");
        $("div.minus").hide().removeClass("opened");
        e.preventDefault();

     }
     $content.slideToggle();

  });
});

Answer 1

我个人不喜欢在 :after 和 :before 上添加文本。 与其使用这些消息，不如将这些符号放在那里。

来自:

.toggle:after{
    content:"View All Violations";
}

收件人:

.toggle:after{
    content:"+";
}

和

.toggle.expanded:after{
     content:"Close All Violations";
}

收件人:

.toggle.expanded:after{
     content:"-";
}

然后为了使这些符号看起来不错，添加类似

的样式

font-weight:bold 和 font-size: 48px

至于消息有那些在元素 span 而不是

<span class="message">View All Violations</span>

Fiddle