html - :after class doesn't work as expected

Question

我需要将 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;
}

<div class='led'> </div>

Answer 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%;
}

<div class="led"></div>

更好的解决方案可能是将 .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;
}

<div class="holder"><div class="led"></div></div>