如何使用：before和：after创build内联样式

我从http://www.ilikepixels.co.uk/drop/bubbler/生成了一个泡泡聊天

在我的页面里面放了一个数字

.bubble { position: relative; width: 20px; height: 15px; padding: 0; background: #FFF; border: 1px solid #000; border-radius: 5px; } .bubble:after { content: ""; position: absolute; top: 4px; left: -4px; border-style: solid; border-width: 3px 4px 3px 0; border-color: transparent #FFF; display: block; width: 0; z-index: 1; } .bubble:before { content: ""; position: absolute; top: 4px; left: -5px; border-style: solid; border-width: 3px 4px 3px 0; border-color: transparent #000; display: block; width: 0; z-index: 0; } 

我想通过rgb根据里面的数字来改变气泡的background-color

所以如果我的div是

 <div class="bubble" style="background-color: rgb(100,255,255);"> 100 </div> 

我想要的颜色是rgb(100,255,255)

事情是这不影响三angular形。

我如何编写内联的CSS，所以它将包括：before和：after？

Answer 1

你不能。 使用内联样式，您直接定位元素。 你不能在那里使用其他select器。

你可以做的是在你的样式表中定义不同的类，定义不同的颜色，然后将类添加到元素中。

Answer 2

关键是要使用background-color: inherit; 在伪元素上。
请参阅： http : //jsfiddle.net/EdUmc/

Answer 3

你可以使用CSSvariables 。

• 在你的style属性中设置你的variables： style="--my-color-var: orange;"
• 在样式表中使用variables： background-color: var(--my-color-var);

浏览器兼容性

最小的例子：

 div { width: 100px; height: 100px; position: relative; border: 1px solid black; } div:after { background-color: var(--my-color-var); content: ''; position: absolute; top: 0; bottom: 0; right: 0; left: 0; } 

 <div style="--my-color-var: orange;"></div> 

Answer 4

如果您真的需要内联，例如，因为您正在dynamic加载一些用户定义的颜色，则可以在内容之前添加<style>元素。

 <style>#project-slide-1:before { color: #ff0000; }</style> <div id="project-slide-1" class="project-slide"> ... </div> 

---

PHP和一些（WordPress的启发）虚拟函数的示例用例：

 <style>#project-slide-<?php the_ID() ?>:before { color: <?php the_field('color') ?>; }</style> <div id="project-slide-<?php the_ID() ?>" class="project-slide"> ... </div>