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

Question

[Ксения]

Добрый день! Помогите пожалуйста понять, почему не получается выровнять элемент и два его псевдоэлемента в одну линию?
https://jsfiddle.net/utsoe165/1/
Есть точка, выровненная по центру контейнера. Делаю ей два псевдоэлемента. Before (синий) ведет себя нормально, сдвинулся влево. А вот когда я добавляю ::after (зеленый) и пытаюсь оттолкнуть его вправо, он сдвигается вправо и вниз. Почему так происходит? Как оставить его на одном уровне с остальными?

Comments

[one_day]

margin-left: 3em;
position: absolute;

Answer 1

[rejjer]

тыньк

Comments

[Ксения]

Работает, но выглядит костыльно ) Хочу понять, почему они так себя ведут без позиционирования. Такое впечатление, что ::after добавляется псевдоэлементу ::before, а не изначальной .dot

[rejjer]

Ксения, напротив, чтобы железно задать позицию относительно родителя - это хороший вариант, ну можно еще обтеканием.
Что касается поведения - ответ, скорей всего, лежит где-то тут: ::before and ::after pseudo-elements, Line height calculations: the 'line-height' and 'v...

[spike__x]

Ксения, Если хотите без позиционирования то добавьте

before {
  float: left; 
}

Answer 2

[spike__x]

position: absolute; обоим псевдоэлементам

Answer 3

[Egor]

Элементарный способ заключается в компенсации:
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