html - 在 div 旁边添加 Unicode

Question

我在下面有一些数据的 CSS 代码，这些数据以 pill 的形式显示，我想要完成的是尝试在其中添加一个 Unicode 加号我的药丸类似于下图。

但是每当我尝试增加 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>

Answer 1

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

因此，我建议您使用 transform 来更改字形的apparent 大小。

因为这是完全视觉的，所以它不会影响药丸的大小。

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