::伪元素之前有奇数垂直偏移量

Question

在此页面我使用了strong::before{}伪元素来添加您在某些章节文本之前看到的星星图像，例如这里：

不幸的是，正如您所看到的，星形图像有一些奇怪的偏移，它位于文本上方：

该伪元素的代码是：

body .prime-steps .prime-section .section-content .min-height-section.chapter-formatting h3.c-accordion__title strong::before  {
    content: '';
    background: url(https://goodowners.dog/wp-content/uploads/2023/12/star_2_yellow_22px.png);
    display:inline-block;
    width: 22px;
    height: 22px;
    position: relative;
    margin-right: 10px;
}

由于某种原因添加

vertical-align:middle;

会产生相反的问题，并且星星位于文本的

下方——多么奇怪！

将

padding-top

 和 

margin-top

 添加到图像中，只会将整个事物推倒。

如果使用检查器，可以看到h3父元素有：

display:flex;
align-items: center;
align-text: center;

如何使伪元素图像与文本垂直居中对齐？

我可以使用

transform:translatey(3px);

 来解决这个问题，但这看起来确实不是“正确”的方法。

Answer 1

我建议添加这个：

strong {
  display: flex;
  align-items: center; /* optional */
}

您可能更喜欢没有

align-items

 的结果，具体取决于您喜欢的外观。