How would one write a pseudo:after css element as a HTML tag place it specifically in the mark-up then create a css rule all at the start of the loading of the DOM ?

Recommended Answers

All 11 Replies

In javascript, somehow I couldn't edit my post ?

Member Avatar

I don't think you can insert html elements into before/after.
js (jQuery) - use .append()/.prepend() to add inside element. use .after()/.before() to add outside element.

If I wanted to take the css pseudo-element ::before or ::after and write it as a HTML tag as well as have a related css rule; you're telling me, I can only use jQuery, correct ?

Am not entirely sure what you want. If you want to remove the ::after from the css, you could insert a span at the position you want and style that.

I want to write the pseudo-class ::before as a HTML tag and place it in the mark up ! For example if a tag has acme:before; I want to write that pseudo-element as a HTML tag, for example acme_p_after to which I can write a rule for that tag.

Member Avatar

I don.t think you can. Look up the :before defi ition. I.m sure it says no html.

Member Avatar

What I.m saying is that the content property if the ::before pseudo element cannot hold html tags.

Show some code of what you have, and another of what you think it should look like.

Unfortunately I can't write a pseudo-element as a HTML tag !

I've re-read this thread numerous times and still trying to get my head around the thing that you want to do with this.

Pseudo elements are indeed not injected into the DOM, but you can access or reach them via JavaScript/jQuery but not for the reason you want (I assume).

Here's one option that can solve some problems:

And you can pass on custom data-attribute values to the content property which you then also can alter via JavaScript (.dataset)

Unfortunately I can't write a pseudo-element as a HTML tag

No, but then why not writing a HTML element instead of using a pseudo element?

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, learning, and sharing knowledge.