Задать вопрос
@Brunetgk
html

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

Добрый день!

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

конструкцию с пспевдоклассами менять нельзя.
  • Вопрос задан
  • 739 просмотров
8 комментариев
Подписаться 1 Средний 8 комментариев
Пригласить эксперта
Ответы на вопрос 2
@glagolew059
frontend developer 
.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;
}
Ответ написан
Комментировать
Комментировать
Rikazavr
@Rikazavr
web design hippie
https://codepen.io/Rikazavr/pen/MzVgpb
Ответ написан
Комментировать
Комментировать
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
Тестировщик-стажёр
ITooLabs • Тула
от 35 000 до 40 000 ₽
Fullstack PHP Developer
Smapse Education
от 40 000 до 65 000 ₽
Trainee - IT Support
move2usajobs.com LLC • Лос-Анджелес
от 2 000 до 4 000 $
Ещё вакансии
Заказы с Хабр Фриланса
Доработка плагина для outlook
25 апр. 2024, в 12:57
1000 руб./в час
Проверить сайт на уязвимости
25 апр. 2024, в 12:50
1000 руб./в час
Нарисовать рекламный креатив для ios приложения
25 апр. 2024, в 12:26
10000 руб./за проект
Ещё заказы