jak stworzyć styl inline z: before i: after

Question

I generowane bubble czat thingy z http://www.ilikepixels.co.uk/drop/bubbler/

W mojej stronie umieścić numer jej wnętrzu

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

chcę background-color bańki zmianie w zależności od liczby jej wnętrzu poprzez rgb

więc jeśli div jest

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

Chcę, aby kolor był rgb(100,255,255)

Chodzi o to, że nie ma to wpływu na trójkąt.

Jak napisać inline css, aby zawierał on: before i: after?

Answer 1

Nie możesz. W stylach wbudowanych kierujesz bezpośrednio element. Nie możesz tam użyć innych selektorów.

Możesz jednak zdefiniować różne klasy w arkuszu stylów, które definiują różne kolory, a następnie dodaj klasę do elementu.

Answer 2

Kluczem jest użycie background-color: inherit; na pseudo elementu.
Zobacz: http://jsfiddle.net/EdUmc/

Answer 3

Możesz, używając CSS variables.

• Ustaw zmienną w swoim atrybutem stylu: style="--my-color-var: orange;"
• użyć zmiennej w arkuszu stylów: background-color: var(--my-color-var);

Browser compatibility

Minimal przykład:

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>

Twój przykład:

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

Answer 4

Jeśli naprawdę potrzebują inline, na przykład dlatego, że ładuje kilka kolorów zdefiniowanych przez użytkownika dynamicznie, można zawsze tuż przed dodać element <style> twoja treść.

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

---

przykład przypadek użycia z PHP i niektórych (wordpress) inspirowane funkcje manekina:

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