how to create inline style with :before and :after

[Veedfrg]

I generated a bubble chat thingy from http://www.ilikepixels.co.uk/drop/bubbler/In my page I put a number inside of it\[code\].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;}\[/code\]I want the \[code\]background-color\[/code\] of the bubble to change according to the number inside of it via \[code\]rgb\[/code\]so if my div is\[code\]<div class="bubble" style="background-color: rgb(100,255,255);"> 100 </div>\[/code\]I want the color to be \[code\]rgb(100,255,255)\[/code\]The thing is this doesn't affect the triangle.How do I write the inline css so it will include the :before and :after?