come creare stile in linea con: before e: after

Question

ho generato una bolla chiacchierata thingy da http://www.ilikepixels.co.uk/drop/bubbler/

Nella mia pagina ho messo un numero all'interno di esso

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

Voglio la background-color della bolla di cambiare in base al numero all'interno di esso tramite rgb

quindi se il mio div è

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

Voglio il colore rgb(100,255,255)

Il fatto è che questo non influisce sul triangolo.

Come scrivere il css in linea in modo che includa: prima e: dopo?

Answer 1

Non è possibile. Con gli stili in linea stai puntando direttamente sull'elemento. Non puoi usare altri selettori lì.

Ciò che è possibile fare, tuttavia, è definire classi diverse nel foglio di stile che definiscono colori diversi e quindi aggiungere la classe all'elemento.

Answer 2

Il tasto utilizza background-color: inherit; sullo pseudo elemento.
Vedi: http://jsfiddle.net/EdUmc/

Answer 3

È possibile, utilizzando CSS variables.

• impostare la variabile nel vostro attributo style: style="--my-color-var: orange;"
• utilizzare la variabile nel foglio di stile: background-color: var(--my-color-var);

Browser compatibility

Esempio minimo:

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>

Il vostro esempio:

.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

Se si ha realmente bisogno in linea, ad esempio perché si sta caricando alcuni colori definiti dall'utente in modo dinamico, si può sempre aggiungere un elemento <style> destra prima il tuo contenuto.

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

---

caso d'uso Esempio con PHP e alcuni (wordpress ispirato) funzioni fittizie:

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