Как выровнять псевдоэлемент ::after внутри ссылки?

Question

[Алексей]

Здравствуйте!
Подскажите, как выровнять ::after

относительно текста внутри ссылки?
<a href="#" class=btn__card">Подробнее</a>

.btn__card {
   padding: 15px 0px;
    background: linear-gradient(90deg, #B246BE 4.1%, #40A8D9 64.35%);
    border-radius: 270px;
    font-size: 22px;
    font-weight: 600;
    display: block;    
    color: #FFFFFF;
    width: 270px;
    text-align: center;
    margin-top: 30px;
    width: 270px;
    margin: 0 auto;     
}
.btn__card::after {
    content: ' ';
    background: url(../img/arrow_left.svg);
    width: 41px;
    height: 23px;   
    display: inline-block;
    margin-left: 20px;
   }

Answer 1

[Виталий Першин]

Добавьте к стили btn__card :

display: flex;
		justify-content: center;
		align-items: center;

Comments

[demorest]

не выйдет с display: flex: там уже есть display: inline-block;

[Виталий Першин]

demorest, Во-первых display: inline-block; у псевдоэлемента, а я предложил добавить flex к блоку .btn__card, Во-вторых, что мешает заменить?

Answer 2

[Ankhena]

1. Раз уж псевдо у вас имеет inline-block, то можно задать ему vertical-align: middle
2. Либо задайте для родителя флекс и align-items: center
3. Удалить псевдо и задать фон стрелкой прямо для кнопки и bg position