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

Answer 2

老实说，我不知道你在问什么。

http://jsfiddle.net/a93jjzvL/

#positive:after {
    content: "+";
    font-weight: bold;
}

通过使用CSS中的内容，您可以更改内容。这样做，大胆，我应该回答你的问题。这毫无意义。当然，现在你需要添加适当的CSS来设计它，但我们在这里教...不是保姆。

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

2 个答案: