Мне нужно сверстать вот это (именно блок ниже заголовков):
По итогу я сделал разметку:
<div class="steps-block">
<div class="steps-img"><img src="img/steps/woman-with-headset.png" alt=""></div>
<div class="steps-img"><img src="img/steps/clock.png" alt=""></div>
<div class="steps-img"><img src="img/steps/money.png" alt=""></div>
<div class="steps-img"><img src="img/steps/folded-document.png" alt=""></div>
<div class="steps-img"><img src="img/steps/calendar.png" alt=""></div>
</div>
И хотел сделать стрелочки с помощью ::after
.steps
&-block
display: flex
justify-content: space-around
&-img
width: 100px
height: 100px
border: 3px solid #ffd200
display: flex
justify-content: center
align-items: center
border-radius: 50%
&:after
content: ''
background: url('../img/steps/arrow_curved.png')
width: 72px
height: 25px
position: absolute
Но в итоге у меня проблема такая, что я не могу оттолкнуть стрелочку снизу с помощью margin-bottom, а если использовать padding, то она начинается повторять и background-repeat: no-repeat мне не помогает.
Как можно это сверстать лучше?