CODEWITHSUNDEEP
htmlcss
Abhijit Mazumder
Abhijit Mazumder

Reputation: 9504

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

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.

Upvotes: 3

Views: 905

Answers (6)

pochen
pochen

Reputation: 883

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.

Upvotes: 4

Daniel Imms
Daniel Imms

Reputation: 50269

CSS cannot change the content on the page, you want JavaScript for this. You can however use the :before pseudo-element to create a 'fake' element before the element and add content to it using the content CSS rule.

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

Some people have problems with this as CSS was never meant to insert content into a page, only 'style' it. It is certainly more convenient doing this in CSS over JavaScript it comes with one major setback, users that use assistive technologies may have issues as outlines in this blog post and the generated content within the pseudo-elements will not be read.

The alternative method is to generate the label using JavaScript. This example creates a <p> element above all tags with the class .important.

See on jsFiddle

HTML

<div class="important">I'm very important</div>
<div>I'm not</div>
<div class="important">I'm very important</div>

jQuery

$(document).ready(function () {
    $('.important').before('<div class="important-notice">Important!</div>');
});

Upvotes: 0

Allan Kimmer Jensen
Allan Kimmer Jensen

Reputation: 4389

You can use the pseudo-class :before with the content property.

.runtime:before { 
    content:"Important!";
    font-weight: bold;
}

You can view the browser support here: http://caniuse.com/#feat=css-gencontent

You might want to have a look at this guide, for a little more infomation and better understanding of this property! It explains the use of special characters, ect. You should beaware that they cannot be transitioned or animated.

Upvotes: 3

Raj Adroit
Raj Adroit

Reputation: 3888

You can use jquery also...

$('.runtime').before('<p>Test</p>');

Upvotes: 0

BenM
BenM

Reputation: 53246

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

Please see this jsFiddle.

Upvotes: 4

Sowmya
Sowmya

Reputation: 26989

Use pseudo-class

.wrap:before{
    content:"Important Generated Content";
    font-weight:bold
}

DEMO

Upvotes: 2

Related Questions