CODEWITHSUNDEEP
cssinline
Nick Ginanto
Nick Ginanto

Reputation: 32130

how to create inline style with :before and :after

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?

Upvotes: 114

Views: 199277

Answers (6)

Nathan Hiemstra
Nathan Hiemstra

Reputation: 171

I found two methods of adding color to an external SVG: https://codepen.io/nathanhiemstra/pen/LYaMzOG?editors=1100

.icon-mask {
    -webkit-mask-image: url(https://www.svgrepo.com/show/322934/path-distance.svg);
    mask-image: url(https://www.svgrepo.com/show/322934/path-distance.svg);
    display: inline-flex;
    height: 100px;
    width: 100px;
    mask-repeat: no-repeat;
    mask-position: center center;
    mask-size: contain;
}

.icon-bg-image {
    background-image: url(https://www.svgrepo.com/show/322934/path-distance.svg);
    display: inline-flex;
    height: 100px;
    width: 100px;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
}

.icon-red {
  background-color: #AD122A;
}
.icon-pink {
  background-color: #FF00FF;
}

/* Get filter value from hex here: https://codepen.io/sosuke/pen/Pjoqqp */
.icon-filter-red {
  filter: invert(12%) sepia(77%) saturate(3846%) hue-rotate(340deg) brightness(103%) contrast(99%);
}

.icon-filter-pink {
  filter: invert(28%) sepia(100%) saturate(5081%) hue-rotate(296deg) brightness(114%) contrast(133%);
<h4>Original</h4>
<i class="icon-bg-image"></i>

<h4>Image Mask on color background</h4>
<i class="icon-mask icon-red"></i>
<i class="icon-mask icon-pink"></i>

<h4>Filter on background image</h4>
<i class="icon-bg-image icon-filter-red"></i>
<i class="icon-bg-image icon-filter-pink"></i>

Upvotes: 0

Nathan Arthur
Nathan Arthur

Reputation: 9096

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>

Upvotes: 130

Jiř&#237; Chmiel
Jiř&#237; Chmiel

Reputation: 876

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

Upvotes: 2

Jules Colle
Jules Colle

Reputation: 11939

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

Upvotes: 18

BigMacAttack
BigMacAttack

Reputation: 4549

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

Upvotes: 58

Jan Hančič
Jan Hančič

Reputation: 53931

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.

Upvotes: 80

Related Questions