如何创建内联样式：before和：after [英] how to create inline style with :before and :after

问题描述

我从 http://www.ilikepixels.co.uk/drop/bubbler/

在我的页面中我在里面放了一个数字

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

我想要 background-color 根据其中的数字通过 rgb

来改变，如果我的div

 < div class =bubblestyle =background-color：rgb（100,255,255）; 100< / div> 
  

我想要的颜色是 rgb（100,255,255）

这不会影响三角形。

如何写入内联css所以它会包括：before和：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?

解决方案

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.

这篇关于如何创建内联样式：before和：after的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！