jquery - 使用 Angularjs 动态生成之前/之后的 CSS 伪内容

Question

我有一个 div 元素，需要动态应用伪元素，例如 before 和 after。我将从我的范围动态地将数据推送到 css“内容”元素。我怎样才能使用 Angular 来做到这一点？

示例 CSS

    .bar:before {
  content: 'dynamic before text';
    height: 20px;
    }
.bar:after {
  content: 'dynamic after text';
    height: 20px;
}

<div class="bar"></div>

Answer 1

您可以为此使用自定义 data 属性以保持其灵 active :

.bar::before,
.bar::after
{
  background-color: silver;
}

.bar::before
{
  content: attr(data-before-content)
}

.bar::after
{
  content: attr(data-after-content)
}

<div class="bar" data-before-content="Hello" data-after-content="There">I have content</div>
<div class="bar" data-before-content="Hello">I have content</div>
<div class="bar" data-after-content="Different">I have content</div>
<div class="bar">I have content only</div>