+\- 造型手风琴

Question

我正在学习编码，我正在尝试用 +/- 制作手风琴面板。 Here is my html and css. And what my goal +/- 是什么？似乎无法让它在 css 中工作（如果可能的话，没有 jquery 没有 javascript）。谢谢

Answer 1

从 fiddle 的 html 部分删除 , 和标签。

您可以使用来自 fiddle 的代码：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;
}

+\- 造型手风琴

styling accordeon with +\-

html

css

accordion