How to add text with css without pseudo-element

Question

I want to add text just with css. But pseudo-elements are not option. Point is to add text just with css, and have text in DOM.

Is that posssible ?

So this is not option :

.someClass:before {
  content: "some text";
}

**NO** if it's not with pseudo-elements....Why are those not an option? — DaniP, Dec 23 '14 at 14:49
I can't manipulate with JavaScript. I want later change that text on some click event. — Raskolnikov, Dec 23 '14 at 14:54
You can't use psuedo elements and you can't use javascript? you probably cant do what you want to do. — lharby, Dec 23 '14 at 14:55
Wait, you can use JS!? Just insert a span and change the inner HTML on click. What's wrong with that? — Paulie_D, Dec 23 '14 at 14:57
Why don't you try styling javascript with css? This seems to be more practical than inserting text with css. You can also try marking up with css. HSML (hyper style markup language). go ahead, the web needs it. :) — knitevision, Dec 23 '14 at 14:57
I can use java script. I just want to find simple solution for my problem. I need to insert text on every place where is someClass. It is lot of places on loot of pages. — Raskolnikov, Dec 23 '14 at 15:11
Why on earth wouldn't you be able to use pseudo elements, but would be open to any other css alternative? — LcSalazar, Dec 23 '14 at 15:16
*But pseudo-elements are not option. Point is to add text just with css* - Pseudo elements ***are*** just css — LcSalazar, Dec 23 '14 at 15:17
Sound t me as though you need Jquery `before` - http://api.jquery.com/before/ — Paulie_D, Dec 23 '14 at 15:26
@LcSalazar You can't select pseudo elements in jQuery because they are NOT part of DOM. I need to edit some of this elements in some cases with Jquery. — Raskolnikov, Dec 23 '14 at 15:29
Are you trying to insert the same content inside the same types of elements? i.e. Hello world in front of every paragraph tag? If so that is not so complex using jquery, but if you have to enter different text for different elements then you have to write much more code and if that is the case I would have thought that *could* take nearly as long as editing the HTML. — lharby, Dec 23 '14 at 15:52

score 5 · Accepted Answer · answered Dec 23 '14 at 15:00

In general, the entire purpose of CSS is to preserve the distinction between style/design and content. The pseudo-selectors are a little unique in that they don't select actually existing content to "style" it, but rather create the content in the first place.

This doesn't exactly interfere with the purpose of CSS because the distinction between content and design can sometimes get a little fuzzy. Cf., for example, http://css-tricks.com/css-content/ which talks of how appending "E-mail: " before every email address can actually be a style decision.

That said, I really don't understand why you don't want to use pseudo-elements. Support is near ubiquitous (http://css-tricks.com/browser-support-pseudo-elements/). Your only other option would be to use JS/jQuery or good ol' HTML.

You can't select pseudo elements in jQuery because they are NOT part of DOM. I want set default values for class "someClass", but after that I want change some elemntsts with Jquery. — Raskolnikov, Dec 23 '14 at 15:41
http://stackoverflow.com/questions/5041494/manipulating-css-pseudo-elements-such-as-before-and-after-using-jquery gives you some options using jQuery. If you are looking for an effect on an event, for example, you can just use the jQuery addClass() function and use CSS to specify the appropriate content. — brianpck, Dec 23 '14 at 15:52

score 1 · Answer 2 · answered Dec 23 '14 at 14:58

Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g., fonts, colors, spacing) to Web documents. (w3org)

You can not add any content without the use of :before or :after

In order to edit the DOM consider using jQuery or any other js script:

jQuery:

$('body').append('<div>Your new content</div>');

How to add text with css without pseudo-element

2 Answers2