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

Question

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

我有一个div元素,需要动态地应用诸如之前和之后的伪元素.我将从我的范围动态地将数据推送到css"content"元素.我怎么能用角度呢？

示例CSS

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

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

Run Code Online (Sandbox Code Playgroud)

Answer 1

Nic*_*o O 26

您可以使用自定义data属性来保持其灵活性:

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

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

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

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

你不知道我花了多少时间尝试在 Angular 6 中做一些超级具体的事情。这个加上属性绑定救了我的命。 (2认同)

Answer 2

小智 6

您可以对内容使用动态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>

Run Code Online (Sandbox Code Playgroud)

归档时间：	10 年，9 月前
查看次数：	8334 次
最近记录：	10 年，9 月前