Is there an equivalent for the 'content' rule that works on elements?

Issue

I want to apply the content rule to an element that isn’t a pseudo element:

css:

#element {
    content: 'foobs'
}

html:

<div id = '#element'></div>

I then wish to retrieve the computed style via javascript:

javascript:

console.log(window.getComputedStyle(document.body, '#element').content ) //=> 'foobs';

This works perfectly when using a pseudo element instead of #element, but I want to use a real element for compatibility reasons (IE7 +).

In short, an alternative to the content rule that works on true elements.

Solution

There isn’t one; the content property is only applicable to the ::before and ::after pseudo-elements. Especially if you’re looking to set content on elements programmatically "for compatibility reasons" and ::before/::after is not available, you won’t find such a solution with CSS. In such a case, you will have much better luck using JavaScript or a server-side solution than using CSS for a lot of other things, not just generated content.

Answered By – BoltClock

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply

(*) Required, Your email will not be published