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

【问题标题】：Place an icon at the right of a label with CSS使用 CSS 在标签右侧放置一个图标
【发布时间】：2016-12-01 00:42:54
【问题描述】：

#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>

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

我尝试使用 :after，像这样：

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

然后，图标就放在文本之后，像这样

文字图标

我想把它放在右边，像这样

文字---------------------------------------------- ------------------------------------图标

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

我该怎么做？

【问题讨论】：

显示内联元素（如 SPAN、LABEL 等），以便浏览器根据其内容计算其高度和宽度。如果要控制高度和宽度，则必须更改这些元素的块。标签样式更改为 {display:block;width:100% }
添加了片段！

标签： html css icons label

【解决方案1】：

您可以使用的一个选项是将#accordion label 的位置设置为相对位置，将: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>

【讨论】：

【解决方案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>

【讨论】：