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

Добрый день! Помогите пожалуйста понять, почему не получается выровнять элемент и два его псевдоэлемента в одну линию?
https://jsfiddle.net/utsoe165/1/
Есть точка, выровненная по центру контейнера. Делаю ей два псевдоэлемента. Before (синий) ведет себя нормально, сдвинулся влево. А вот когда я добавляю ::after (зеленый) и пытаюсь оттолкнуть его вправо, он сдвигается вправо и вниз. Почему так происходит? Как оставить его на одном уровне с остальными?
  • Вопрос задан
  • 6147 просмотров
Решения вопроса 1
Пригласить эксперта
Ответы на вопрос 2
@spike__x
position: absolute; обоим псевдоэлементам
Ответ написан
Комментировать
Softwider
@Softwider
63fd53d26b5e9244745708.png
Элементарный способ заключается в компенсации:
width: 185px
left: 50%
margin-left: -92px

.team__title 
        position: relative
        font-family: Gotham, sens-serif
        font-weight: bold
        font-size: 30px
        text-transform: uppercase
        margin-bottom: 53px

.team__title::after
        content: ""
        display: block
        position: absolute
        width: 185px
        height: 3px 
        bottom: -20px
        left: 50%
        margin-left: -92px
        background-color: #000000
Ответ написан
Комментировать
Ваш ответ на вопрос

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

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