CSS до и после содержимого с скобками не работает ⇐ CSS

[Anonymous]

Я хочу, чтобы мои навигационные ссылки заключались в скобки только на экране компьютера/компьютера, а не на мобильном устройстве. В моем коде работает правая скобка (nav-link:hover::after). Но левая скобка (nav-link:hover::before) должна закрыть ссылку.
Пожалуйста, посмотрите мой отрывок в полном режиме!
Вот мой код:

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

window.onload = function() {

/* Burger menu toggle nav */
const topNav      = document.getElementById("myTopnav");
const burgerMenu  = document.getElementById("burgerMenu");

burgerMenu.addEventListener("click", () =>  {
topNav.classList.toggle("responsive");
burgerMenu.classList.toggle("toggleMenu");
});

};

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

/***********************************************
TEMPLATE CONTAINER
***********************************************/
.container {
display: grid;
height: 100vh;
grid-template-columns: 1fr;
grid-template-rows: 0.1fr 1fr 1fr 1fr;
grid-template-areas:
"nav"
"header"
"main"
"footer";
}

nav {
grid-area: nav;
background-color:blue;
}

header {
grid-area: header;
background-color: darkcyan;
}

main {
grid-area: main;
background-color: chocolate;
}

footer {
grid-area: footer;
background-color: cornflowerblue;
}

/***********************************************
Navbar
***********************************************/

nav {
position: fixed;
top: 0;
left: 0;
right: 0;
width: 100vw;
background-color: #2c2c2c;
z-index: 1;
}

#burgerMenu {
float: right;
padding: 28px 15px 15px 15px;
}

.dot-arrow {
padding-right: 10px;
}

.topnav a {
display: none;
color: white;
text-decoration: none;
font-size: 20px;
}

.topnav.responsive .icon {
position: absolute;
right: 0px;
top: 0px;
z-index: 2;
}

.topnav.responsive a {
display: block;
float: none;
padding: 16px 0px;
}

.responsive {
margin-top: 28px;
padding: 0 0 10px 20px;
background-color: #161616;
}

.toggleMenu {
content:url("/images/svg/menu-close.svg");
width: 32px;
height: 32px;
}

.nav-item {
display: inline;
padding: 0 10px 10px 10px;
font-size: 1.5rem;
color: white;
text-transform: uppercase;
text-shadow: 10px 0px 20px $primary,
10px 0px 20px $primary;
}

.nav-link {
text-decoration: none;
}

.dot-arrow {
padding-right: 10px;
}

.navbar-brand {
font-family: "Smooch Sans", serif;
color: white;
text-decoration: none;
font-size: 2.2rem;
text-shadow: 10px 0px 20px $primary,
10px 0px 20px $primary;
}

.logo-brand-wrapper {
display: inline;
}

.brand-logo {
padding: 25px 5px 0px 15px;;
text-shadow: 1px 1px 2px black,
0 0 25px $primary,
10px 0px 20px #004f7c;
}

.brand-name {
color: $primary;
}

.nav-link:link {
color: white;
text-decoration: none;
}

.nav-link:visited {
color: white;
}

.nav-link:hover {
color: white
}

.nav-link:active {
color: white;
}

.nav-link:hover::before {
content: "[";
display: none;
color: $primary;
}

.nav-link:hover::after {
content: "]";
display: none;
color: $primary;
}

/*  X-Small devices (portrait phones, less than 576px)
No media query for `xs` since this is the default in Bootstrap
*/
/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {

.nav-item {
font-size: 0.8rem;
}

.topnav.responsive a {
padding: 5px 0px;
}

}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {

.topnav.responsive a {
padding: 5px 0px;
}

}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {

/* TEMPLATE CONTAINER */
.container {
display: grid;
height: 100vh;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
grid-template-areas:
"nav nav nav"
"main main main"
"footer footer footer";
}

/* NAVBAR */
.topnav {
float: right;
padding: 20px;

}

.topnav a {
display: inline;
font-size: 1.3rem;
}

#burgerMenu {
display: none;
}

.brand-logo {
padding: 13px 5px 0px 15px;
width: 30px;
height: 30px;
}

.navbar-brand {
font-size: 2.3rem;
}

.dot-arrow {
display: none;
}

.nav-link:hover::before {
display: inline;
position:  absolute;

}

.nav-link:hover::after {
display: inline;
position: absolute;
}
}

/* X-Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {}

/* XX-Large devices (larger desktops, 1400px and up) */
@media (min-width: 1400px) {}

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

[url=#]Home[/url]


[url=#]



    

[/url]


[list]
[*]
[url={{ .URL }}]Logos[/url]

[*]
[url={{ .URL }}]Sketeches[/url]

[*]
[url={{ .URL }}]Phots[/url]

[*]
[url={{ .URL }}]Tut[/url]

[*]
[url={{ .URL }}]Contact[/url]

[/list]

Надеюсь, кто-нибудь сможет мне помочь, спасибо.

Подробнее здесь: https://stackoverflow.com/questions/793 ... ot-working