：课后不按预期工作

I need to place the div content before the element, so I have used :before class. But it doesn't work. What could be the reason for it? Is there something incorrect with css?

我需要将div内容放在元素之前,所以我在课前使用过:但它不起作用。可能是什么原因呢? 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>

1 个解决方案

#1

Everything is fine with CSS. As I understand :before and :after, it will add a content inside your div element. So, it will look something like this:

CSS的一切都很好。据我所知:在之前和之后,它会在你的div元素中添加一个内容。所以,它看起来像这样:

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

Problem that you are facing is that there is no content inside .led div, so :before and :after seem to have the same result. Your css defines .led div to have width of only 14px, so there is no place for Connecting text. You can try something like this for a quick (and ugly) fix:

你面临的问题是.led div中没有内容,所以:before和:after似乎有相同的结果。你的css定义.led div的宽度只有14px,因此没有连接文本的地方。您可以尝试这样的快速(和丑陋)修复:

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

Better solution might be to enclose .led div with another one and add :before to that parent div, something like this:

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

#1