：课后没有按预期工作答案

【问题标题】：:after class doesn't work as expected：课后没有按预期工作
【发布时间】：2015-11-10 16:09:47
【问题描述】：

我需要将div content 放在元素之前，所以我使用了:before 类。但它不起作用。可能是什么原因？ css 有什么不对吗？

.led {
	/* Yellow LED */
	margin-top: 3px;
    width: 14px;
    height: 14px;
    background-color: #FF0;
    border-radius: 50%;
    box-shadow: rgba(0, 0, 0, 0.2) 0 3px 7px 0px, inset #808002 0 0px 9px, #D4D400 0 2px 12px;
    margin-left: 80%;
}

.led:before {
	content: "Connecting";
	padding-left: 18px;
    font-size: 11px;
    font-family: "Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif !important;
}

&lt;div class='led'&gt; &lt;/div&gt;

【问题讨论】：

将 .led:before 更改为 .led::before
@Jugnu 不，不起作用。
在 .led 类中添加 display:inline-block jsfiddle.net/SUKYw
@Jugnu 不起作用。
你能提供fiddle/plnkr吗？

标签： html css pseudo-class

【解决方案1】：

CSS 一切都很好。据我了解:before 和:after，它将在您的 div 元素中添加一个内容。所以，它看起来像这样：

<div class="led">
    <!-- content added with :before, Connecting in your case -->
    Your div content
    <!-- content added with :after -->
</div>

您面临的问题是.led div 中没有内容，因此:before 和:after 似乎具有相同的结果。您的 css 将 .led div 定义为只有 14px 的宽度，因此 Connecting 文本没有位置。您可以尝试这样的方法来快速（且难看）修复：

.led:before {
    content: 'Connecting';
    margin-left: -60px; /* CHANGED */
    font-size: 11px;
    font-family: "Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif !important;
}
.led {
    /* Yellow LED */
    margin-top: 3px;
    width: 14px;
    height: 14px;
    background-color: #FF0;
    border-radius: 50%;
    box-shadow: rgba(0, 0, 0, 0.2) 0 3px 7px 0px, inset #808002 0 0px 9px, #D4D400 0 2px 12px;
    margin-left: 80%;
}

&lt;div class="led"&gt;&lt;/div&gt;

更好的解决方案可能是将.led div 与另一个div 括起来，并将:before 添加到该父div，如下所示：

.holder {
    margin-left: 80%;
}
.holder:before {
    content: 'Connecting';
    font-size: 11px;
    font-family: "Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif !important;
}
.led {
    /* Yellow LED */
    margin-top: 3px;
    width: 14px;
    height: 14px;
    background-color: #FF0;
    border-radius: 50%;
    display: inline-block;
    box-shadow: rgba(0, 0, 0, 0.2) 0 3px 7px 0px, inset #808002 0 0px 9px, #D4D400 0 2px 12px;
}

&lt;div class="holder"&gt;&lt;div class="led"&gt;&lt;/div&gt;&lt;/div&gt;

【讨论】：