文字与icon水平居中

如图所示，实现文字和icon居中。表面上看是一个很简单的实现。
我的代码

<div className='enquire'>咨询客服</div>

.enquire{
   position: relative;
   font-family: PingFangSC-Regular;
   font-size: 45px;
   color: #525252;
   letter-spacing: 0;
   line-height: 45px;
   padding-right: 45px;
   &::after {
        content: '';
        background: url('xxxx') no-repeat;
        background-size: contain;
        background-position: center center;
        width: 36px;
        height: 36px;
        display: block;
        position: absolute;
        top: 0;
        right: 0;
        margin-left: 9px;
   }
}

但是效果却是这样的：因为div是块级元素，独占一行，因此其伪元素是添加在该行的最后面。但我想实现箭头在文字后面，难道还需要给文字单独添加一个span标签吗？

并不需要。只需要将文字所在的div元素转换为inline-block即可。

那么接下来，如何将它在一行居中显示呢？–行内元素的位置往往可以通过控制块级元素来控制。

因此，需要这种DOM结构需要用另一种方法来实现

<div className='enquire'>
   <span>咨询客服</span>
</div>