После появления элемента перед родительским элементом ⇐ CSS

[Anonymous]

В этом коде я пытаюсь создать панель навигации для панели управления.
Я добавил эффект свечения под моей текущей панелью навигации, которая имеет серый фон, но при добавлении псевдоэлемента он появляется ниже текущая панель навигации, она появляется выше и полностью удаляет серый фон, поэтому я поигрался с z-index, чтобы исправить это, но это не исправило позиционирование. В конечном продукте мне просто нужна панель навигации с серым фоном и свечением под ней. имеет простой эффект свечения под ним с использованием элемента (::after).
Вот код, над которым я работаю, для справки. Я использую браузер Brave (созданный на основе Google). Заранее благодарим вас за любую помощь!

feather.replace()

* {
font-family: 'Montserrat', sans-serif;
}

@import url('https://fonts.googleapis.com/css2?famil ... splay=swap');
body {
background: #1a1a1a;
font-family: 'Open Sans', sans-serif;
margin: 0;
padding: 0;
color: #b0b0b0;
}

.navbar {
position: fixed;
top: 1rem;
left: 1rem;
background: #2c2c2c;
border-radius: 10px;
padding: 1rem 0;
box-shadow: 0 0 40px rgba(0, 0, 0, 0.3);
height: calc(100vh - 4rem);
}

.navbar::after {
content: '';
position: absolute;
top: -10px;
left: -10px;
right: -10px;
bottom: -10px;
border-radius: 20px;
z-index: -1;
filter: blur(15px);
opacity: 0.6;
background: linear-gradient(0deg, #4285F4 0%, #9b72cb 27%, #d96570 55%);
}

.navbar__menu {
list-style-type: none;
padding: 0;
margin: 0;
position: relative;
}

.navbar__item {
position: relative;
}

.navbar__link {
position: relative;
display: flex;
align-items: center;
justify-content: center;
height: 3.5rem;
width: 5.5rem;
color: #b0b0b0;
text-decoration: none;
transition: 250ms ease all;
}

.navbar__link span {
position: absolute;
left: 100%;
transform: translateX(-3rem);
margin-left: 1rem;
opacity: 0;
pointer-events: none;
color: #6d8eff;
background: #2c2c2c;
padding: 0.75rem;
transition: 250ms ease all;
border-radius: 17.5px;
white-space: nowrap;
}

.navbar__link:hover,
.navbar:not(:hover) .navbar__link:focus {
color: #6d8eff;
}

.navbar__link:hover span,
.navbar:not(:hover) .navbar__link:focus span {
opacity: 1;
transform: translateX(0);
}

.navbar__item::before {
content: '';
position: absolute;
opacity: 0;
z-index: -1;
top: 0;
left: 1rem;
width: 3.5rem;
height: 3.5rem;
background: #6d8eff;
border-radius: 17.5px;
transition: 250ms cubic-bezier(1, 0.2, 0.1, 1.2) all;
}

.navbar__item:hover::before {
opacity: 0.2;
}

@keyframes gooeyEffect {
0% {
transform: scale(1, 1);
}
50% {
transform: scale(0.5, 1.5);
}
100% {
transform: scale(1, 1);
}
}

.navbar__item:hover::before {
animation: gooeyEffect 250ms 1;
}







Document

• Dashboard
• Subjects
• Notes
• Tasks
• Statistics
• Help
• Settings

Подробнее здесь: https://stackoverflow.com/questions/790 ... nt-element