Css 如何使用：before 和：after 创建内联样式

发布于01月21日

我生成了一个泡沫聊天工具

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

.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="bubble" style="background-color: rgb(100,255,255);"> 100 </div>

我想要rgb(100,255,255)的 colored颜色

问题是这不会影响三角形.

如何编写内联css，使其包含:before和:after？

Css 如何使用：before 和：after 创建内联样式

推荐答案

Css相关问答推荐

在Angular mat-drawer组件中防止在mat-drawer-innercontainer中添加滚动条

设置ScaleImageButton的样式

CSS Select 器仅 Select 具有特定类名称的每行的第一个单元格

排除特定元素的目标元素

CSS 布局：使一列依赖于另一列

动态覆盖 Vuetify 类

弹性布局溢出时的换行符

Tailwind CSS： Select 单选按钮时不应用同行判断的边框

如何在保持默认外观的同时更改 javaFX 中按钮的突出显示 colored颜色

Material UI Modal 因背景而变暗

CSS和 Select 器 - 我可以 Select 具有多个类的元素吗？

我应该使用 CSS ：disabled 伪类还是 [disabled] 属性 Select 器，还是见仁见智？

最大宽度与最小宽度

Bootstrap 3 Glyphicons CDN

使用自定义 CSS 在 WebView 中呈现 HTML

为什么在 CSS3 中启用硬件加速会降低性能？

CSS 块格式化上下文是如何工作的？

如何将页脚(div)与页面底部对齐？

使用 CSS 更改
高度

CSS垂直对齐不适用于浮动