html - 在div旁边添加Unicode

我在下面的CSS代码中以pill的形式显示了一些数据，我想要完成的工作是尝试在药丸中添加Unicode plus sign，如下图所示。



但是，每当我尝试增加Unicode的font-size时，它只会弄乱药丸的整个文本和形状，是否有任何方法可以使它看起来像顶部图像，而又不会弄乱原始的CSS？任何帮助，将不胜感激谢谢。

var red = {};
var key = "Red Fruits";
red[key] = ['Apple', 'Cherry', 'Strawberry', 'Pomegranate', 'Rassberry'];

var redString = '';
$.each(red[key], function(index) {
  redString += ('<div class="pilldiv redpill class">' + red[key][index] + '</div>');
});
$('.redclass').html(redString);

.pilldiv {
    padding: 0px 19px;
    text-align: center;
    font-size: 14px;
    border-radius: 25px;
    color: Black;
    margin: 1px;
}
.redpill {
  background-color: Pink;
  cursor: default;
}

 .redpill:before {
    content: "\002B";
    font-size: 28px;
    width: 15px;
    vertical-align: baseline;
    margin-left: -7px;
}
.class {
  font-family: Open Sans;
}

.center {
  display: flex;
  justify-content: center;
}

.wrappingflexbox {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

h3 {
  font-weight: normal;
  color: White;
}

.panel {
  display: table;
  table-layout: fixed;
  height: 100%;
  width: 30%;
  background-color: black;
}

body {
  background-color: white;
}

<div class="center">
  <div class="panel">
    <div id="redid" class="redclass wrappingflexbox"></div>
  </div>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

最佳答案

当您更改伪元素字体的实际大小时，它将改变药丸的形状，因为药丸的大小由内容的大小决定。

因此，我建议您通过使用transform来更改字形的外观大小。

由于这完全是视觉效果，因此不会影响药丸的大小。

 .redpill:before {
    content: "\002B";
    /* font-size: 28px;*/ */ remove this */
    width: 15px;
    vertical-align: baseline;
    margin: 0 7px 0 -7px;
    display:inline-block; /* required */
    transform:scale(2); /* this*/
}

var red = {};
var key = "Red Fruits";
red[key] = ['Apple', 'Cherry', 'Strawberry', 'Pomegranate', 'Rassberry'];

var redString = '';
$.each(red[key], function(index) {
  redString += ('<div class="pilldiv redpill class">' + red[key][index] + '</div>');
});
$('.redclass').html(redString);

.pilldiv {
  padding: 0px 19px;
  text-align: center;
  font-size: 14px;
  border-radius: 25px;
  color: Black;
  margin: 1px;
}

.redpill {
  background-color: Pink;
  cursor: default;
}

.redpill:before {
  content: "\002B";
  /* font-size: 28px;*/
  */ remove this */ width: 15px;
  vertical-align: baseline;
  margin: 0 7px 0 -7px;
  display: inline-block;
  transform: scale(2)
}

.class {
  font-family: Open Sans;
}

.center {
  display: flex;
  justify-content: center;
}

.wrappingflexbox {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

h3 {
  font-weight: normal;
  color: White;
}

.panel {
  display: table;
  table-layout: fixed;
  height: 100%;
  width: 30%;
  background-color: black;
}

body {
  background-color: white;
}

<div class="center">
  <div class="panel">
    <div id="redid" class="redclass wrappingflexbox"></div>
  </div>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>