生成CSS动态使用Angularjs之前/之后的伪内容 [英] Generate CSS Pseudo content for before/after dynamically using Angularjs

问题描述

我有一个div元素，需要应用伪元素，如前后动态。我将从我的范围动态推动数据到csscontent元素。我如何使用angular？

示例CSS

 。 bar：before {
 content：'dynamic before text'; 
 height：20px; 
} 
 .bar：after {
 content：'dynamic after text'; 
 height：20px; 
} 
 
< div class =bar>< / div> 
  

解决方案

您可以使用自定义数据属性以保持其灵活性：

  .bar :: before，.bar :: after {background -color：silver;}。bar :: before {content：attr（data-before-content）}。bar :: after {content：attr（data-after-content）}  

 < div class =bardata-before-content =Hellodata-after-content =There>我有内容< / div>< div class =bardata-before-content =Hello>我有内容< / div>< div class =bar -content =Different>我有内容< / div>< div class =bar>我只有内容< / div>  

>

I have a div element and need to apply pseudo elements such as before and after dynamically. I will be pushing data to css "content" element dynamically from my scope. How can I do that using angular?

Sample CSS

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

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

解决方案

You can use a custom data attribute for this to keep it flexible:

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

这篇关于生成CSS动态使用Angularjs之前/之后的伪内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！