#css #z-index #pseudo-element
#CSS #z-индекс #псевдоэлемент
Вопрос:
У меня есть такой код:
gt; .arrow { cursor: pointer; user-select: none; display: flex; justify-content: center; align-items: center; margin-left: 1em; transition: background-color .1s ease; z-index: 1; amp;:hover { background-color: ${backgroundColors.green3}; amp;:after { background: url(${arrowPointToRightSvg}); z-index: 2; position: relative; } } } amp; gt; .arrow:after { position: relative; display: block; content: ' '; height: 13px; width: 7px; background: url(${arrowPointToRightGreenSvg}); background-size: cover; } Ожидаемый результат :элемент after будет отображаться над его родительским элементом, но фон .стрелка (при наведении) перекрывает содержимое (svg со стрелкой) элемента :after. Почему это происходит и что я могу сделать, чтобы мой фон элемента :после отображался с более высоким приоритетом?
Комментарии:
1. Как я решил проблему: В данный момент я менял свой :после фона элемента мне нужно было снова добавить некоторые свойства (содержимое, высота, ширина, размер фона).
2. не можете ли вы заставить его работать с позицией относительно (для класса стрелки ) и абсолютной позицией (для :после)?