Pseudo element length same as text?

Sorry about this, I know it’s probably really simple but I don’t understand what’s happening to my pseudo element.

Basically what I want is for the pseudo element’s length to be the same as the length of the text, but it always overshoots. I tried changing width:100% to width:80%, but when I do that, it isn’t aligned center to the text anymore. I’m not sure what’s going on and I tried to figure it out, but I really can’t. I have some code in which the pseudo element’s length is the same as the text, but when I use that exact code with no changes, the pseudo element just disappears. This isn’t a problem with the original project I put the code on. Anyway, this is my code:

HTML:

Text

CSS:

.nav{
position: fixed;
overflow: hidden;
width: 100%;
padding: 25px;
}

.topnav a {
float: left;
text-align: center;
padding: 5px 10px;
text-decoration: none;
margin-left: 15px;
margin-right: 15px;
transition: 0.6s;
}

li {
text-decoration: none;
text-list-style: none;
}

a {
text-decoration: none;
position: relative;
color: black;
transition: 0.6s;
cursor: pointer;
}

.effect1 {
padding-top: 10px;
margin-left: 15px;
text-decoration: none;
font-size: 20px;
margin-left: 60px;
}

.effect1:after {
width:0%;
content: ‘’;
left: 50%;
bottom: 4px;
height: 1.5px;
background: rgba(255,255,255,0.5);
position: absolute;
display: block;
transition: 0.45s;
}

.effect1:hover:after {
width: 100%;
left: 0;
transition: 0.45s;
}

I’m sorry for always posting pretty dumb questions, but really, like aforementioned, I don’t understand what’s happening, especially with how one piece of code worked on one Glitch project, and it isn’t working on this one. (There doesn’t seem to be any code under body and html that could have affected it)