Scss/ css dynamic content

Question

HTML:

<div class="card"></div>

Scss

.card{
  &:before {
    content: 'Text inserted before via CSS';
   }
}

This adds content before the div. but how can i add the content from SCSS.

This was not working

.card{ content: 'Text inserted via CSS';  }

Your question is quite confusing.. your scss is working fine I think. card{ content: 'Text inserted via CSS'; } this code won't work, you need to add &:before then content property — Piyush Jain
– Piyush Jain, Commented Apr 26, 2020 at 6:04
yes :before and :after works fine. but I want to update only the content. Any work arounds in css — upog
– upog, Commented Apr 26, 2020 at 6:15
1. Content won't work without before or after. 2. If wanna change text of content, add a data attribute in html like data-text="custom text" then in content you can use it like this content: attr(data-text). But note here also you will have to use before or after. — Piyush Jain
– Piyush Jain, Commented Apr 26, 2020 at 9:02

Ali Ali · Accepted Answer · 2020-04-26 06:23:38Z

1

The content property only applies to CSS pseudo-elements such as :before and :after

You should use JQuery for this purpose:

$('.card').text("Text inserted before via JQuery");

answered Apr 26, 2020 at 6:06

Ali Ali

1,8922 gold badges22 silver badges37 bronze badges

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

2 Comments

Thanks for your response. I'm trying to do in css/scss, with out other library

@upog But I tell you that surely you can not do it with css/scss.

Aravinth Ramesh · Accepted Answer · 2020-04-26 09:35:00Z

1

Try something like this.

.card:before{
      content:attr(data-content);
    }

 <div class="card" data-content="Text inserted before via CSS"></div>

answered Apr 26, 2020 at 9:35

Aravinth Ramesh

3512 silver badges7 bronze badges