使用 Angularjs 为之前/之后动态生成 CSS 伪内容答案

【问题标题】：Generate CSS Pseudo content for before/after dynamically using Angularjs使用 Angularjs 为之前/之后动态生成 CSS 伪内容
【发布时间】：2015-11-19 10:45:30
【问题描述】：

我有一个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>

【问题讨论】：

标签： jquery css angularjs

【解决方案1】：

您可以为此使用自定义 data 属性以保持灵活性：

.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>

【讨论】：

酷。说得通。让我试试。谢谢！
你不知道我花了多少时间尝试在 Angular 6 中做一些超级具体的事情。这个加属性绑定救了我的命。

【解决方案2】：

您可以对内容使用动态 html 属性，如下所示： JSBin：http://jsbin.com/sepino/edit?html,css,js,output

<!DOCTYPE html>
<html ng-app="test">
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
    <script language="JavaScript">
        angular.module('test',[]).controller('testController',function(){
            this.textbefore = 'left ';
            this.textafter = ' right';
        });
    </script>
    <style>
    .bar:before {
        content:  attr(data-textbefore);
        height: 20px;
    }
    .bar:after {
        content:  attr(data-textafter);
        height: 20px;
    }
    </style>
    <meta charset="utf-8">
    <title>JS Bin</title>
</head>
<body ng-controller="testController as myCtrl">
    <div class="bar" data-textbefore="{{myCtrl.textbefore}}" data-textafter="{{myCtrl.textafter}}">inside</div>
</body>
</html>

【讨论】：

谢谢。这会很有帮助。

【解决方案3】：

您可以在内容字段中使用属性。我想你可以从中提取你需要的东西。

span:before {
   content: attr(data-content);
}

【讨论】：

谢谢！让我试试看。