Question

我在下面的CSS代码中以UPDATE zones SET sort_order=sort_order + 1 WHERE sort_order >= 3; INSERT INTO zones VALUES (NULL, 3, 'ffff')的形式显示了一些数据，我想要完成的工作是尝试在药丸中添加pill，如下图所示。

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

font-size

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

Answer 1

当更改伪元素字体的 actual 大小时，由于药丸的大小由内容物的大小决定，它将相应地改变药丸的形状。

因此，我建议您改用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>

Answer 2

确保:before继承类font-size：

.redpill:before {
    content: "\002B";
    padding-right: 2px;
}

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

在div旁边添加Unicode

2 个答案: