Adding Unicode beside divs - html

Question

I have this CSS code below of some data displayed in a form of a pill what i'm trying to accomplish is trying to add a Unicode plus sign inside of my pill something like this image below.
But whenever i try to increase the font-size of the Unicode it just messes up the whole text and shape of the pills is there any way to make it look like the image on-top without messing too much of the original css? Any help would be appreciated thanks.
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

When you change the actual size of the pseudo-elememt font it will change the shape of the pill accordingly since the pill's size is determined by the size of the contents.
Thus I would suggest that you change the apparent size of the glyph by using a transform instead.
Since this is entirely visual it does not affect the size of the pill.
.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

Make sure :before inherits class 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;
}