Passing innerText of html element into :before css class

Question

So I have an h1 tag in my html, with text in it.

<h1>123</h1>



h1:before{
    content:"?????";
    }

Now I want this text to be used in my css before pseudo class, and the text is dynamic, it will be changed during the runtime of the app, so it's not static. I need the before content always reflect the current inner text.

Help?

Does this answer your question? Is it possible for a pseudo element to inherit the text of the parent element? — Gangula
– Gangula, Commented Nov 6, 2023 at 6:33

Fabricio B · Accepted Answer · 2022-02-19 17:35:01Z

2

You can use the attr (attribute) fot that. I searched on web, and found this article: css-before-and-after

CSS:

h1::before {
  content: attr(data-dynamic);
  margin-right: 10px;
  
}

HTML :

<h1 data-dynamic='something' > Magic </h1>

Result:

Something Magic

So, you pass in data-dynamic(or another name) what you want in the before or after content.

edited Feb 19, 2022 at 17:35

answered Feb 19, 2022 at 17:24

Fabricio B

3371 silver badge6 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Martin Sh Over a year ago

I don't have this attribute on the h1 tag. I need access to the inner text and not any other attributes

Fabricio B Over a year ago

Read about that: element.before(), but use JavaScript or JQUERY. I can show you, case it is not clear yet.

Martin Sh Over a year ago

OK. Nice to learn new stuff. I thought there is a css way to do this

Collectives™ on Stack Overflow

Passing innerText of html element into :before css class

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related