:after class 没有按预期工作

Question

我需要在元素之前放置div 内容，所以我使用了:before class。但它不起作用。可能是什么原因呢？ 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 与另一个包含起来，并将 :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>

:after class 没有按预期工作

:after class doesn't work as expected

html

css

pseudo-class