一些css字符代码(\25b6和\25c0)在flexbox中没有对齐

Question

我使用CSS字符代码来显示上一个和下一个的两个三角形，它们通过flexbox进行布局。我注意到一个奇怪的垂直对齐问题。

这是第一个例子。左右箭头不对齐。

div {
margin: 0 8px;
}
.container {
display: flex;
align-items: baseline;
justify-content: center;
}
.some::before {
content: "25c0";
}
.more::after {
content: "25b6";
}

<div class="container">
<div class="some">
<a><span>some text</span></a>
</div>
<div class="other">
Other Text
</div>
<div class="more">
<a><span>some more text</span></a>
</div>
</div>

但是当我将箭头更改为相同的CSS字符时，它们确实会对齐

div {
margin: 0 8px;
}
.container {
display: flex;
align-items: baseline;
justify-content: center;
}
.some::before {
content: "25b6";
}
.more::after {
content: "25b6";
}

<div class="container">
<div class="some">
<a><span>some text</span></a>
</div>
<div class="other">
Other Text
</div>
<div class="more">
<a><span>some more text</span></a>
</div>
</div>

我试着使用flex direction:column；并在没有运气的情况下调整内容。事实上，在对齐内容的情况下，反转对齐发生在另一个箭头未对齐的地方。

添加一个链接到一个JSFiddle，因为它很明显地出现在那里：https://jsfiddle.net/L2fgcpyv/2/

Answer 1

因为这两个三角形的大小不同。我发现它们是相同的，并且在浏览器之间更加一致

https://unicode-table.com/en/25C4/

https://unicode-table.com/en/25BA/