Как убрать отступ от псевдоэлемента в блоке div??

Question

[Brunetgk]

Добрый день!

Проблема следующая:

Блок справа. Создан псевдоэлемент :before - кружочек. Его надо поместить на линию, как сверху.
Использую position relative. Все хорошо - кружочек встает как надо, но остается абзац у текста - место кружка.
Пробовал сделать через абсолют. справа даю calc (50% - 20px ). Все работает, но сверху выровнить не получится, так как если задать абсолютный топ, то при вставке следующих блоков, псевдоэлементы будут наследовать параметр топ и улетать туда же.
Как я вижу выхода 2:
1. как-то убрать этот пробел при relative
2. как то спозиционировать вертикальный отступ при absolute так, чтобы он расчитывался относительно верхнего блока, а не всего окна.

конструкцию с пспевдоклассами менять нельзя.

Comments

[Антон]

Пример кода

[Мария Коробкоголовых]

Таки да, залей свой код на jsfiddle или codepen

[Brunetgk]

Антон, Мария Коробкоголовых, https://codepen.io/brunetgk/pen/gQRjWZ

[Мария Коробкоголовых]

Brunetgk, у тебя указан right: calc(50% - 10px);, но он не сработает без position: absolute; этому же элементу

[Мария Коробкоголовых]

Причем в нечетных ты это свойство написал, а в четных нет

[Brunetgk]

Мария Коробкоголовых, я знаю) я просто меняю то релатив то абсолют. Это свойство не трогаю, так как оно работает только в абсолюте..

[Brunetgk]

Тут еще важный момент, что при если сделать отсчет от правого края, то, когда уменьшаешь окно по ширине, точка уезжает соответственно

[Мария Коробкоголовых]

Надо тогда подумоть, может придется менять структуру немного

Answer 1

[2cha.headz]

.content_item:nth-child(odd) div:nth-child(2):after {
    content: "";
    display: inline-block;
    position: absolute;
    right: -11px;
    top: 50%;
    margin-top: -11px;
    min-width: 20px;
    min-height: 20px;
    border-radius: 50%;
    background: rgb(177, 177, 174);
}

.content_item:nth-child(even) div:nth-child(1):before {
    content: "";
    display: inline-block;
    min-width: 20px;
    min-height: 20px;
    border-radius: 50%;
    background: rgb(177, 177, 174);
    position: absolute;
    left: -11px;
    top: 50%;
    margin-top: -11px;
}

section.content_item {
    position: relative;
}

Answer 2

[Мария Коробкоголовых]

https://codepen.io/Rikazavr/pen/MzVgpb