CSS 如何使用 :before 和 :after 创建内联样式

how to create inline style with :before and :after

提问by Nick Ginanto

I generated a bubble chat thingy from http://www.ilikepixels.co.uk/drop/bubbler/

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

In my page I put a number inside of it

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

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

I want the background-colorof the bubble to change according to the number inside of it via rgb

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

so if my div is

所以如果我的 div 是

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

I want the color to be rgb(100,255,255)

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

The thing is this doesn't affect the triangle.

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

How do I write the inline css so it will include the :before and :after?

我如何编写内联 css 以便它包含 :before 和 :after ？

采纳答案by Jan Han?i?

You can't. With inline styles you are targeting the element directly. You can't use other selectors there.

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

What you can do however is define different classes in your stylesheet that define different colours and then add the class to the element.

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

回答by BigMacAttack

The key is to use background-color: inherit;on the pseudo element.
See: http://jsfiddle.net/EdUmc/

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

回答by Nathan Arthur

You can, using CSS variables(more precisely called CSS custom properties).

您可以使用CSS 变量（更准确地说，称为 CSS 自定义属性）。

• Set your variable in your style attribute: style="--my-color-var: orange;"
• Use the variable in your stylesheet: background-color: var(--my-color-var);

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

Browser compatibility

浏览器兼容性

Minimal example:

最小的例子：

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>

Your example:

你的例子：

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

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

回答by Jules Colle

If you really need it inline, for example because you are loading some user-defined colors dynamically, you can always add a <style>element right before your content.

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

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

---

---

Example use case with PHP and some (wordpress inspired) dummy functions:

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

Since HTML 5.2 it is valid to place style elements inside the body, although it is still recommend to place style elements in the head.

从 HTML 5.2 开始，将 style 元素放置在 body 中是有效的，尽管仍然建议将 style 元素放置在 head 中。

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

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

回答by Ji?í Chmiel

I resolved a similar problem by border-color: inherit

我通过边框颜色解决了类似的问题：继承

, see:

， 看：

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