My Link in react won't work when clicked on - css

Question

When i click on the links, they wont work. But when I change the position in ul.pullRight li:before to relative, the styling disappears and the link works. There's a hover effect in the links.
This is my NavBar component
import React from 'react'
import PropTypes from 'prop-types'
import { Link } from 'react-router-dom'
const Navbar = ({ icon, title }) => {
return (
<nav className='navbar bg-primary'>
<h1 style={{ fontWeight: 'bold', fontSize: '35px', color: 'whitesmoke'}}><i className={icon}></i>{title}</h1>
<ul className='container pullRight'>
{/* LINK to is used in place of <a> tag */}
<li><Link to="/">Home</Link></li>
<li><Link to="/about">About</Link></li>
<li><Link to="/login">Login</Link></li>
<li><Link to="/logout">LogOut</Link></li>
</ul>
</nav>
)
}
This is the css file
/* Pull right */
ul.container li
{
color: #FFF;
text-decoration: none;
font: 15px Raleway;
margin: 0px 10px;
padding: 10px 10px;
position: relative;
z-index: 0;
cursor: pointer;
}
ul.pullRight li:before
{
position: absolute;
width: 2px;
height: 100%;
left: 0px;
top: 0px;
content: '';
background: #FFF;
opacity: 0.3;
transition: all 0.3s;
}
ul.pullRight li:hover:before
{
width: 100%;
}

Answer 1

here i'm assuming that you don't want to li:before to be clicked so you can add this to the css, pointer-events: none and it won't cover the initial element anymore.
i did not test this, but please do test and tell if it worked.