Изображение отображается при наведении CSS Squarespace ⇐ CSS

[Anonymous]

В настоящее время имеется следующий CSS

Код: Выделить всё

 .header-menu-nav-item:nth-child(1)::after {
content: url(link); /* Set content here */
position: absolute;
top: 50!important; /* Adjust vertical positioning */
right: 3; /* Adjust horizontal positioning */
width: 5px; /* Adjust width as needed */
height: 30px; /* Adjust height as needed */
background-repeat: no-repeat;
z-index: 1; /* Place the image on top of the content */
opacity: 0; /* Hide the image initially */
transition: opacity 0.2s ease-in-out; /* Smooth transition on hover */
}

Код: Выделить всё

.header-menu-nav-item:nth-child(1):hover::after {
opacity: 1; /* Show the image on hover */
}

Это влияет на заголовок первой страницы в моем меню навигации. У меня возникла проблема: когда я настраиваю верх, право, ширину или высоту, ничего не происходит.
Я добавил !important, и это ничего не изменило.

Подробнее здесь: https://stackoverflow.com/questions/786 ... quarespace