使用CSS在标签的右侧放置一个图标

Question

#accordion input {
	display: none;
}
#accordion label {
	background: #88C2E6;
    color: white;
	cursor: pointer;
	display: block;
	margin-bottom: .125em;
	padding: .25em 1em;
	z-index: 20;
    min-height: 40px;
    line-height: 40px;
}
#accordion label:hover {
	opacity: 0.6;
}

#accordion label:after{
    content:url(http://image.noelshack.com/fichiers/2016/48/1480523700-arrow-dl.png);
    background-position: right;
}

#accordion input:checked + label {
	background: #88C2E6;
	color: white;
	margin-bottom: 0;
}
#accordion article {
	background: white;
	height:0px;
	overflow:hidden;
	z-index:10;
}
#accordion article p {
	padding: 1em;
}
#accordion input:checked article {
}
#accordion input:checked ~ article {
	height: auto;
	margin-bottom: .125em;
    border-left: solid 1px #88C2E6;
    border-right: solid 1px #88C2E6;
}

<div id="accordion">
    <div>
        <input type="checkbox" id="check-1" />
        <label for="check-1">Some label</label>
        <article>
            <p>Some text</p>
        </article>
    </div>
  </div>

我的手风琴由带有标签和文章的输入组成，当我点击标签时，文章会展开或缩回。我想在标签的右端添加一个图标。

我尝试使用：之后，像这样：

#accordion label:after{
content:url(/img.png);
}

但是，然后，图标放在文本后面，就像这样

  

文字图标

我希望它放在右边，就像这样

  

文本---------------------------------------------- ------------------------ ICON

当我使用属性background-position时，它仍然在同一个地方。

我该怎么做？

Answer 1

您可以使用的一个选项是将#accordion label的位置设置为relative，将:after伪元素设置为absolute。然后为其分配right值0（或您想要的任何值）。

#accordion input {
	display: none;
}
#accordion label {
	background: #88C2E6;
    color: white;
	cursor: pointer;
	display: block;
    position: relative;
	margin-bottom: .125em;
	padding: .25em 1em;
	z-index: 20;
    min-height: 40px;
    line-height: 40px;
}
#accordion label:hover {
	opacity: 0.6;
}

#accordion label:after{
    content:url(http://image.noelshack.com/fichiers/2016/48/1480523700-arrow-dl.png);
    position: absolute;
    right: 0;
}

#accordion input:checked + label {
	background: #88C2E6;
	color: white;
	margin-bottom: 0;
}
#accordion article {
	background: white;
	height:0px;
	overflow:hidden;
	z-index:10;
}
#accordion article p {
	padding: 1em;
}
#accordion input:checked article {
}
#accordion input:checked ~ article {
	height: auto;
	margin-bottom: .125em;
    border-left: solid 1px #88C2E6;
    border-right: solid 1px #88C2E6;
}

<div id="accordion">
    <div>
        <input type="checkbox" id="check-1" />
        <label for="check-1">Some label</label>
        <article>
            <p>Some text</p>
        </article>
    </div>
  </div>

Answer 2

您必须在图标上使用position: absolute;：

#accordion input {
	display: none;
}
#accordion label {
	background: #88C2E6;
    color: white;
	cursor: pointer;
	display: block;
	margin-bottom: .125em;
	padding: .25em 1em;
	z-index: 20;
    min-height: 40px;
    line-height: 40px;
    position: relative;
}
#accordion label:hover {
	opacity: 0.6;
}

#accordion label:after{
    content:url(http://image.noelshack.com/fichiers/2016/48/1480523700-arrow-dl.png);
    position: absolute;
    right: 15px;
}

#accordion input:checked + label {
	background: #88C2E6;
	color: white;
	margin-bottom: 0;
}
#accordion article {
	background: white;
	height:0px;
	overflow:hidden;
	z-index:10;
}
#accordion article p {
	padding: 1em;
}
#accordion input:checked article {
}
#accordion input:checked ~ article {
	height: auto;
	margin-bottom: .125em;
    border-left: solid 1px #88C2E6;
    border-right: solid 1px #88C2E6;
}

<div id="accordion">
    <div>
        <input type="checkbox" id="check-1" />
        <label for="check-1">Some label</label>
        <article>
            <p>Some text</p>
        </article>
    </div>
  </div>