Question

我正在学习编码，我正试图用+/-制作手风琴面板。 Here是我的HTML和CSS。我的goal是什么什么用+/-？只是似乎无法让它在css中工作（没有jquery没有javascript，如果可能的话）。谢谢

Answer 1

从小提琴中的html部分删除和标记。

您可以使用小提琴代码：http://fiddle.jshell.net/Khumesh/te3pfcc9/

Answer 2

.accordion input:checked + label:before {
    content: '-';
}
.accordion input:not(:checked) + label:before {
    content: '+';
}

尝试使用：before选择器在标签文本之前添加+或 - 。然后你只需要设置元素的样式，例如像这样

.accordion label {
    padding-left: 50px;
}
.accordion input:checked + label:before {
    content: '-';
    display: inline-block;
    position: absolute;
    left: 0;
    top: 0;
    line-height: 42px;
    width: 10px;
    padding: 0 15px;
    height: 100%;
    border-right: 1px solid #CCC;
    text-align: center;
}
.accordion input:not(:checked) + label:before {
    content: '+';
    display: inline-block;
    position: absolute;
    left: 0;
    top: 0;
    line-height: 42px;
    width: 10px;
    padding: 0 15px;
    height: 100%;
    border-right: 1px solid #CCC;
    text-align: center;
}

造型手风琴+ \ -

2 个答案: