@AhmedGasem

Как приделать :after сразу нескольким блокам?

Хочу приделать эти стрелочки к блокам
Должно получиться так:
dbc6aa698a4945069c0889ddd86a5b24.jpg
Но получается вот это
9733a299c79549fba312d2b4cd1f243f.jpg

Пожалуйста помогите разобраться в чем дело

<h2 class="col-lg-12 col-md-12 col-sm-12 col-xs-12" style="text-align:center;padding-bottom:50px;" class="col-lg-12 col-md-12 col-sm-12 col-xs-12">Как мы работаем</h2>
        <div class="how-working col-lg-3 col-md-3 col-sm-3 col-xs-12">
            <img src="css/images/telephone.png" width="100px" height="100px">
            <p>Оценка проблемы</p>
        </div>
        <div class="how-working col-lg-3 col-md-3 col-sm-3 col-xs-12">
            <img src="css/images/copy-document.png" width="100px" height="100px">
            <p>Заключаем договор</p>
        </div>
        <div class="how-working col-lg-3 col-md-3 col-sm-3 col-xs-12">
            <img src="css/images/ruble.png" width="100px" height="100px">
            <p>Оплата счета</p>
        </div>
        <div class="how-working col-lg-3 col-md-3 col-sm-3 col-xs-12">
            <img src="css/images/travelling.png" width="100px" height="100px">
            <p>Выезд специалиста</p>
        </div>
        <div class="how-working col-lg-4 col-md-4 col-sm-4 col-xs-12">
            <img src="css/images/shield.png" width="100px" height="100px">
            <p>Работа специалиста</p>
        </div>
        <div class="how-working col-lg-4 col-md-4 col-sm-4 col-xs-12">
            <img src="css/images/home.png" width="100px" height="100px">
            <p>Сдача обьекта</p>
        </div>
        <div class="how-working col-lg-4 col-md-4 col-sm-4 col-xs-12">
            <img src="css/images/home.png" width="100px" height="100px">
            <p>Выдача сертификата</p>
        </div>


.how-working{
    padding-bottom:30px;
}
.how-working::after{
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 10.5px 0 10.5px 30px;
    border-color: transparent transparent transparent #007bff;
    z-index: 50;
    vertical-align: middle;
}
  • Вопрос задан
  • 126 просмотров
Пригласить эксперта
Ответы на вопрос 1
Palehin
@Palehin
Frontend
Псевдоэлементы before и after не работаю без указания свойства: content: '';
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы