Как взаимодействовать с элементом ::after?
Недавно начал изучать xpath, нужно было извлечь данные о времени работы аптеки. Время работы находиться в элементе after, путь к которому я написать не смог. Также заметил что элемент отображается в DevTools, а в исходном коде страницы на этом же месте его нет из-за чего так происходит? Сайт в котором велась работа https://fialkaspb.ru/pharmacy/, путь к родительскому элементу //div[@class="item__address item__address--ninetoten"]
Дополнительно:
Заходим сюда
/bitrix/cache/css/s1/redisigne/page_3ac9c0442a118ab1ae197b277795c9a4/page_3ac9c0442a118ab1ae197b277795c9a4_v1.css |
/bitrix/cache/css/s1/redisigne/page_3ac9c0442a118ab1ae197b277795c9a4/page_3ac9c0442a118ab1ae197b277795c9a4_v1.css
И находим строку:
.district__item .item__address--ninetoten::after { content: '9:00 - 22:00'; font-weight: 300; font-size: 12px; line-height: 14px; color: var(--pink); padding-left: 5px; } |
.district__item .item__address--ninetoten::after { content: '9:00 - 22:00'; font-weight: 300; font-size: 12px; line-height: 14px; color: var(--pink); padding-left: 5px; }
Вот и ответ. Время в CSS, а не в HTML коде.
- как можно напрямую обратиться к псевдоэлементу CSS? С помощью CSS селектора?
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для взаимодействия с псевдоэлементом ::after в CSS, вам необходимо использовать псевдоэлемент в вашем CSS-коде и применить к нему стили с помощью селектора. Псевдоэлемент ::after используется для добавления контента после содержимого элемента, без необходимости изменения HTML-разметки.
Прежде всего, у вас должен быть элемент, к которому вы хотите применить псевдоэлемент ::after. Например, если у вас есть элемент с классом "example", вы можете создать псевдоэлемент ::after для этого элемента следующим образом:
.example::after { content: "Это текст, добавленный с помощью псевдоэлемента ::after"; color: red; }
В приведенном выше примере мы используем селектор .example::after для выбора псевдоэлемента ::after элемента с классом "example". Мы добавляем текст "Это текст, добавленный с помощью псевдоэлемента ::after" с красным цветом.
Вы также можете применить другие стили к псевдоэлементу ::after, такие как размер шрифта, фоновый цвет, отступы и многое другое, в зависимости от ваших потребностей.
Если вам необходимо взаимодействовать с псевдоэлементом ::after с помощью JavaScript, вы можете использовать методы доступа к DOM-элементам, такие как getElementById или querySelector, чтобы получить доступ к элементу и изменить его стили или содержимое. Например, вы можете добавить или удалить класс элементу с псевдоэлементом ::after для изменения его внешнего вида.
Надеюсь, это поможет вам понять, как взаимодействовать с псевдоэлементом ::after в CSS и JavaScript. Если у вас возникнут дополнительные вопросы, не стесняйтесь задавать их!