scss/css动态内容答案

【问题标题】：Scss/ css dynamic contentscss/css动态内容
【发布时间】：2020-04-26 17:35:00
【问题描述】：

HTML：

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

Scss

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

这会在 div 之前添加内容。但是我如何从 SCSS 添加内容。

这不行

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

【问题讨论】：

你的问题很令人困惑..我认为你的 scss 工作正常。 card{ content: 'Text inserted via CSS'; }这段代码不行，你需要添加&:before then content属性
是的 :before 和 :after 工作正常。但我只想更新内容。 css 中的任何解决方法
1.没有之前或之后，内容将无法工作。 2.如果想改变内容的文本，在html中添加一个数据属性，比如data-text="custom text"，然后在内容中你可以像content: attr(data-text)一样使用它。但请注意，您必须在此之前或之后使用。

【解决方案1】：

content属性只适用于:before和:after等CSS伪元素

您应该为此目的使用 JQuery：

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

【讨论】：

【解决方案2】：

试试这样的。

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

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

【讨论】：