web-dev-qa-db-fra.com

comment créer un style inline avec: before et: after

J'ai généré un sujet de conversation en bulle à partir de http://www.ilikepixels.co.uk/drop/bubbler/

Dans ma page, je mets 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 que le background-color De la bulle change en fonction du nombre à 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)

La chose est que cela n'affecte pas le triangle.

Comment puis-je écrire le css en ligne afin qu'il inclue le: before et: after?

csscss3inline
59
Nick Ginanto

Tu ne peux pas. Avec les styles en ligne, vous ciblez directement l'élément. Vous ne pouvez pas utiliser d'autres sélecteurs ici.

Cependant, vous pouvez définir différentes classes dans votre feuille de style, définir différentes couleurs, puis ajouter la classe à l'élément.

48
Jan Hančič

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

43
BigMacAttack

Vous pouvez utiliser 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é du navigateur

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>
30
Nathan Arthur

Si vous en avez vraiment besoin en ligne, par exemple parce que vous chargez de manière dynamique des couleurs définies par l'utilisateur, vous pouvez toujours ajouter un <style> élément 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 certaines 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 valide de placer des éléments de style dans le corps, bien qu'il soit toujours recommandé de placer des éléments de style dans la tête.

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

6
Jules Colle