如何重新定位：：内容前不移动边框？

Question

我有一个元素，有一个::before CSS样式，以显示一个箭头向上在一个黑色的圆圈内。

​

​

https://jsfiddle.net/dnkvy4az/

问题是char \25b2不是垂直地位于中间。

当我更改vertical-alignment时，它会移动整个虚拟元素，包括方框。如何将框内的内容向上移动？

我可以通过填充右/底/左来垂直对齐，但我想保持圆圈相同的大小.

.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="#" class="calculated-property-name --expanded">Confirmed Balance</a>

Answer 1

将下面提供的附加样式添加到::before样式中。这会解决你的问题。

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

Answer 2

您肯定需要定义一个固定的width和height来实现这一点。

然后，它是一个以它为中心的问题，无论是用柔性盒还是在我的例子中，用text-align和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="#" class="calculated-property-name --expanded">Confirmed Balance</a>

​