使用Angularjs动态生成CSS伪类内容的before/after。

Question

使用Angularjs动态生成CSS伪类内容的before/after。

17

我有一个div元素，需要动态应用伪元素before和after。我将从我的作用域动态地将数据推送到CSS "content"元素中。我如何使用Angular实现这一点？

样例CSS

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

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

- rajcool111

3个回答

7

你可以使用动态的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>

- igorshmigor

谢谢。那会很有帮助的。 - rajcool111

2

您可以在内容字段中使用属性。我猜您可以从中提取所需内容。

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

- Adam Hughes

谢谢！让我试试。 - rajcool111

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Nico O · Accepted Answer

您可以使用自定义的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>