comment créer un style en ligne avec :before et :after

Question

J'ai généré une bulle de chat à partir de http://www.ilikepixels.co.uk/drop/bubbler/

Dans ma page, j'ai mis un numéro à l'intérieur.

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

Je veux le background-color de la bulle à changer en fonction du nombre qui se trouve à l'intérieur de celle-ci via rgb

donc si mon div est

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

Je veux que la couleur soit rgb(100,255,255)

Le fait est que cela n'affecte pas le triangle.

Comment puis-je écrire la css en ligne pour qu'elle inclue le :before et le :after ?

Answer 1

Vous pouvez, en utilisant Variables CSS (plus précisément appelées propriétés personnalisées CSS).

• Définissez votre variable dans votre attribut de style :
  style="--my-color-var: orange;"
• Utilisez la variable dans votre feuille de style :
  background-color: var(--my-color-var);

Compatibilité des navigateurs

Exemple minimal :

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>

Votre exemple :

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

Vous ne pouvez pas. Avec les styles en ligne, vous ciblez directement l'élément. Vous ne pouvez pas utiliser d'autres sélecteurs à cet endroit.

Ce que vous pouvez faire cependant, c'est définir différentes classes dans votre feuille de style qui définissent différentes couleurs, puis ajouter la classe à l'élément.

Answer 3

La clé est d'utiliser background-color: inherit; sur le pseudo-élément.
Voir : http://jsfiddle.net/EdUmc/

Answer 4

Si vous en avez vraiment besoin en ligne, par exemple parce que vous chargez des couleurs définies par l'utilisateur de manière dynamique, vous pouvez toujours ajouter une balise <style> juste avant votre contenu.

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

---

Exemple de cas d'utilisation avec PHP et quelques fonctions factices (inspirées de 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>

Depuis HTML 5.2, il est possible de placer des éléments de style à l'intérieur du corps, bien qu'il soit toujours recommandé de placer les éléments de style dans l'en-tête.

Référence : https://www.w3.org/TR/html52/document-metadata.html#the-style-element

Answer 5

J'ai résolu un problème similaire en border-color : inherit

voir :

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