Question

我需要在元素前放置div 内容，因此我使用了:before类。但它不起作用。可能是什么原因呢？ css有什么不对吗？

＆＃13;

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

＆＃13;

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

＆＃13;

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，因此没有连接文本的位置。您可以尝试这样的快速（和丑陋）修复：

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

：课后没有按预期工作

1 个答案: