为同一伪单元格中的两个字形添加不同的样式

Question

我有一个要求，我需要在单个伪单元格中显示两种不同的 css 样式。

我正在使用 class 将两个 Unicode 字符放入一个伪元素中。但是我想要这两个有两种不同的颜色。

请看下面css class:

.doubleSign:before {    
  font-family: 'Glyphicons Halflings';
  content: "\e086\e101";
  font-size: 10px !important;
  margin-bottom: -7px !important;
 }

我该怎么做？请帮我。谢谢。

Answer 1

将两个符号放入不同的 <span> 或 <i> 以用不同的 CSS 对待它们；因为不可能使用单个选择器为两个符号应用不同的 CSS。

Answer 2

您可以在 .doubleSign 上声明两个 pseudo 选择器 :before, :after 并单独添加 styling 因为不可能将它们作为单个元素获取。

.doubleSign:before{    
  font-family: 'Glyphicons Halflings';
  content: "\e086";
  font-size: 10px !important;
  margin-bottom: -7px !important;
  color:blue;
}  
.doubleSign:after{    
  font-family: 'Glyphicons Halflings';
  content: "\e101";
  font-size: 10px !important;
  margin-bottom: -7px !important;
  color:red;
}

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="doubleSign">

</div>

为同一伪单元格中的两个字形添加不同的样式

Adding different styles to two glyphicons in the same pseudo cell

html

css

glyphicons