how to create inline style with before and after

Question

I generated a bubble chat thingy from http   www ilikepixels co uk drop bubbler   In my page I put a number inside of it   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      I want the background-color of the bubble to change according to the number inside of it via rgb  so if my div is   lt div class  bubble  style  background-color  rgb 100 255 255    gt  100  lt  div gt    I want the color to be rgb 100 255 255   The thing is this doesn t affect the triangle   How do I write the inline css so it will include the  before and  after

User · Answer

You can  using CSS variables  more precisely called CSS custom properties    Set your variable in your style attribute  style  quot --my-color-var  orange  quot  Use the variable in your stylesheet  background-color  var --my-color-var    Browser compatibility Minimal example   x000D   x000D  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    x000D   lt div style  --my-color-var  orange   gt  lt  div gt  x000D   x000D   x000D   Your example   x000D   x000D   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    x000D   lt div class  bubble  style  --bubble-color  rgb 100 255 255    gt  100  lt  div gt  x000D   x000D   x000D

User · Answer

The key is to use background-color  inherit  on the pseudo element  See  http   jsfiddle net EdUmc

User · Answer

I resolved a similar problem by border-color  inherit    see    lt li style  border-color   lt  php echo  hex   gt    gt     lt  li gt   li       border-width  0     li before       content          display  inline-block      float  none      margin-right  10px      border-width  4px      border-style  solid      border-color  inherit

User · Answer

If you really need it inline  for example because you are loading some user-defined colors dynamically  you can always add a  lt style gt  element right before your content    lt style gt  project-slide-1 before   color   ff0000    lt  style gt   lt div id  project-slide-1  class  project-slide  gt       lt  div gt      Example use case with PHP and some  wordpress inspired  dummy functions    lt style gt  project-slide- lt  php the ID     gt  before   color   lt  php the field  color     gt     lt  style gt   lt div id  project-slide- lt  php the ID     gt   class  project-slide  gt       lt  div gt    Since HTML 5 2 it is valid to place style elements inside the body  although it is still recommend to place style elements in the head   Reference  https   www w3 org TR html52 document-metadata html the-style-element

User · Answer

You can t  With inline styles you are targeting the element directly  You can t use other selectors there   What you can do however is define different classes in your stylesheet that define different colours and then add the class to the element

[css] how to create inline style with :before and :after

Minimal example:

Your example:

Examples related to css

Examples related to inline