【问题标题】：how to create inline style with :before and :after如何使用 :before 和 :after 创建内联样式
【发布时间】：2013-01-21 09:59:01
【问题描述】：

我从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;
}

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

所以如果我的 div 是

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

我希望颜色是rgb(100,255,255)

问题是这不会影响三角形。

如何编写内联 css 使其包含 :before 和 :after？

【问题讨论】：

标签： css inline

【解决方案1】：

您可以使用CSS variables（更准确地说是 CSS 自定义属性）。

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

Browser compatibility

小例子：

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

&lt;div style="--my-color-var: orange;"&gt;&lt;/div&gt;

你的例子：

.bubble {
  position: relative;
  width: 30px;
  height: 15px;
  padding: 0;
  background: #FFF;
  border: 1px solid #000;
  border-radius: 5px;
  text-align: center;
  background-color: var(--bubble-color);
}

.bubble:after {
  content: "";
  position: absolute;
  top: 4px;
  left: -4px;
  border-style: solid;
  border-width: 3px 4px 3px 0;
  border-color: transparent var(--bubble-color);
  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;
}

&lt;div class='bubble' style="--bubble-color: rgb(100,255,255);"&gt; 100 &lt;/div&gt;

【讨论】：

我第一次使用 css 变量，它就像一个魅力。谢谢！
我不知道这是一回事。太棒了。
很遗憾，Internet Explorer 不支持
是的，如果您需要支持 IE，您需要将自定义属性限制为不会削弱 IE 用户网站功能的用例。换句话说，使用渐进增强。
非常智能且实用。非常感谢

【解决方案2】：

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

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

【讨论】：

我可以用javascript做吗？
显然是的：stackoverflow.com/questions/7330355/…
@NickGinanto 确定你可以 - 它只是行不通 :D 你在这里与浏览器内部的斗争，你不能用一种语言来重新发明轮子......
奇怪的是，尽管被标记为“答案”，但这个答案是完全不正确的。请参阅上面 Nathan Arthur 的回答。

【解决方案3】：

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

【讨论】：

好答案。继承可以非常方便：当你想要像箭头这样的东西时，它是由与父级相关的颜色组成的边框......

【解决方案4】：

如果您确实需要内联它，例如因为您正在动态加载一些用户定义的颜色，您始终可以在内容之前添加一个 <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>

从 HTML 5.2 开始，将样式元素放在正文中是有效的，尽管仍然建议将样式元素放在头部。

参考：https://www.w3.org/TR/html52/document-metadata.html#the-style-element

【讨论】：

很好的解决方案！它非常适合我的情况（在液体中应用影响样式的条件）。
强调“如果你真的需要它”！ :)

【解决方案5】：

我通过border-color:inherit

解决了类似的问题

，见：

<li style="border-color: <?php echo $hex ?>;">...</li>

li {
    border-width: 0;
}

li:before {
    content: '';
    display: inline-block;
    float: none;
    margin-right: 10px;
    border-width: 4px;
    border-style: solid;
    border-color: inherit;
}

【讨论】：