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

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

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?

Nathan Arthur · Answer 1 · 2021-06-08T23:08:28.203

124

You can, using CSS variables (more precisely called CSS custom properties).

Set your variable in your style attribute:
style="--my-color-var: orange;"
Use the variable in your stylesheet:
background-color: var(--my-color-var);

Browser compatibility

Minimal example:

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>

Your example:

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

edited Jun 08 '21 at 23:08

answered Oct 04 '17 at 19:46

Nathan Arthur

8,287
7
55
80

4

First time I use css variables, and it works like a charm. Thanks! – Amjad Abu Saa Oct 14 '18 at 19:29
3

I didn't know this was a thing. It's great. – Mote Zart Feb 04 '19 at 20:55
3

Not supported by Internet Explorer, unfortunately – horstwilhelm Sep 25 '19 at 08:15
2

Yup, if you need to support IE, you'll want to limit custom properties to use cases that won't cripple website functionality for IE users. In other words, use progressive enhancement. – Nathan Arthur Sep 25 '19 at 12:46
5

Very very smart and functional. thanks a lot – Amir Mar 02 '21 at 11:44

score 76 · Accepted Answer · answered Jan 21 '13 at 10:34

76

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.

answered Jan 21 '13 at 10:34

Jan Hančič

53,269
16
95
99

can i do it with javascript? – Nick Ginanto Jan 21 '13 at 10:37
6

Apparently yes: http://stackoverflow.com/questions/7330355/javascript-set-css-after-styles – Jan Hančič Jan 21 '13 at 10:37
@NickGinanto sure you can - it just won't work :D your fighting here with browser internals, you cannot reinvent the weel with a language laying on top of that... – jebbie Jun 19 '18 at 08:31
1

Oddly, in spite of being marked as 'The Answer', this answer is quite incorrect. See Nathan Arthur's answer above. – Spinner Oct 02 '21 at 04:31

score 56 · Answer 3 · answered Apr 15 '13 at 03:16

56

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

answered Apr 15 '13 at 03:16

BigMacAttack

4,479
3
30
39

1

good answer. inheritance can be very very handy with :after when you want things like arrows made out of borders with parent-dependent colors... – Jay Edwards Aug 13 '20 at 12:52

Jules Colle · Answer 4 · 2018-12-05T14:46:14.303

18

If you really need it inline, for example because you are loading some user-defined colors dynamically, you can always add a <style> element right before your content.

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

Example use case with PHP and some (wordpress inspired) dummy functions:

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

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

edited Dec 05 '18 at 14:46

answered Oct 09 '17 at 15:33

Jules Colle

11,227
8
60
67

1

great solution! It was perfect for my situation (aplying conditionals in liquid that affect styles). – Diego Pamio Dec 03 '18 at 23:55
emphasis on "if you really need it"! :) – Jay Edwards Aug 13 '20 at 12:54

score 2 · Answer 5 · answered Feb 18 '20 at 11:58

I resolved a similar problem by border-color: inherit

, see:

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

how to create inline style with :before and :after

5 Answers5

Minimal example:

Your example:

Linked

Related