我需要将 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>
最佳答案
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>
关于html - :after class doesn't work as expected,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33624895/