I have an element that has a ::before
CSS styled to show an arrow-up inside a black circle.
https://jsfiddle.net/dnkvy4az/
The problem is that char \25b2
doesn't sit vertically in the middle.
When I change the vertical-alignment
it moves the whole virtual element including the box. How can I move the content inside the box up?
I can get to to align vertically by padding the right/bottom/left, but I would like to keep the circle the same size...
.calculated-property-name.--expanded::before {
content: '\25b2';
color: black;
background-color: white;
border-radius: 1em;
margin: 0 0.25em 0 0;
padding: 0 0.25em;
border: 2px solid black;
font-size: 0.75em;
vertical-align: baseline;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}
<a href="#" >Confirmed Balance</a>
CodePudding user response:
Add the additional style provided below to your ::before
style. this will solve your problem.
.calculated-property-name.--expanded::before {
position: relative;
top: -2px;
font-size: 10px;
width: 16px;
height: 16px;
display: inline-flex;
justify-content: center;
padding: 0;
margin: 0;
}
CodePudding user response:
You definitely have define a fixed width
and height
to achieve this.
And then it's a matter of centering it, either with flexbox are like in my example,
text-align
and line-height
.
.calculated-property-name {
text-decoration: none;
}
.calculated-property-name.--expanded::before {
content: '\25b2';
color: black;
background-color: white;
border-radius: 50%;
display: inline-block;
margin: 0 0.25em 0 0;
width: 16px;
height: 16px;
line-height: 1;
text-align: center;
border: 2px solid black;
font-size: 0.75em;
vertical-align: top;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}
<a href="#" >Confirmed Balance</a>