Как создать встроенный стиль с: before и: after

Я создал чат с пузырьками из 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?

Ответ 1

Вы не можете. С встроенными стилями вы нацеливаете элемент непосредственно. Вы не можете использовать другие селектора.

Однако вы можете определить разные классы в таблице стилей, которые определяют разные цвета, а затем добавляют класс к элементу.

Ответ 2

Ключ должен использовать background-color: inherit; для псевдоэлемента.
Смотрите: http://jsfiddle.net/EdUmc/

Ответ 3

Вы можете, используя CSS-переменные (точнее, называемые пользовательскими свойствами CSS).

Установите переменную в своем атрибуте стиля: style="--my-color-var: orange;"
Используйте переменную в вашей таблице стилей: 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>

Ответ 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