:after class doesn't work as expected

Question

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?

.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

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:

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

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