A bug(?) with "::before" in CSS - html

Question

I made some cool css on my site so I can see what is code and what is not.
Now I want that everytime there is a code block - the text "Code: " will be above the code block.
So I did this:
.code::before {
content: "Code: ";
}
Now the problem is that the text "Code: " is inside the code block, what can I do?
Thank you

Answer 1

Your code is working correctly; pseudo elements do not create line breaks. Here's a workaround:
.code {
position:relative;
margin-top: 1em;
}
.code::before {
position: absolute;
top: -1em;
left: 0;
content:"Code: ";
}
Demo: http://jsfiddle.net/vro5ojb9/

Answer 2

.code::before means a pseudo element inside .code as the first element before any other child elements.
It doesn't mean an element before .code in the document.
CSS Selectors:
5.12.3 The :before and :after pseudo-elements
The ':before' and ':after' pseudo-elements can be used to insert
generated content before or after an element's content.
Your code is doing exactly what it is defined to do, it's not a bug.
Ref: http://www.w3.org/TR/CSS2/generate.html

Answer 3

Here's a simple jQuery that actually inserts a <p> tag before the instances, no need to offset positioning:
$(function() {
$($('<p>').html('Code: ')).insertBefore('.code');
});
JSFiddle: http://jsfiddle.net/p32ufmza/