How To Insert Some Content Before An HTML Element In The Runtime Using CSS

Question

Suppose the HTML defined as

<div>
  <div class="runtime"> Some Important Text.Insert "Important" Before This </div>
  <div class="normal"> General Text </div>

</div>

So Generally The Output Would be

Some Important Text.Insert "Important" Before This

General Text

But After Rendering It should Show Us

Important Generated Content

Some Important Text.Insert "Important" Before This

General Text

I am looking for only css solution.

Answer 1

You are looking for this

.runtime:before{
    content: "Important Generated Content";
    font-weight: bold;
    display: block;
}

Yes, you can add some margin-bottom as the other answers suggested. I'd feel like committing plagiarism if I change my code directly. Just annotate here.

You may guess, there's before, is there after?
The answer is yes!

You can do things like

.importantStuff:after{
    content: "!!!!!";
}

This adds !s at the end of importantStuff class

One last thing, every element can only have exactly one before and one after, so use them wisely. And enjoy using CSS.