Center element of pseudo element - html

Question

I have a nav bar and below text I am putting a thin line using :after.
I want that line in the middle of the li tag.
ul {
background: black;
}
ul li {
display: inline-block;
padding: 20px 10px;
cursor: pointer;
}
ul li a {
text-decoration: none;
color: #FFFFFF;
}
ul li:hover {
background: #5249FF;
}
ul li:after {
content: '';
width: 10px;
height: 3px;
background: #fff;
position: absolute;
top: 20%;
left: 15px;
}
<ul>
<li>
HOME
</li>
<li>
WORLD
</li>
<li>
SPORTS
</li>
</ul>
I want white thin line in the center of each li tag.
Any help would be great.
Thank You.

Answer 1

I think you want to like this
ul {
background: black;
}
ul li {
display: inline-block;
padding: 20px 10px;
cursor: pointer;
position: relative;
}
ul li a {
text-decoration: none;
color: #FFFFFF;
}
ul li:hover {
background: #5249FF;
}
ul li::after {
background: #fff;
bottom: 10px;
content: "";
height: 3px;
left: 0;
margin: auto;
position: absolute;
right:0;
width: 10px;
}
<ul>
<li>
HOME
</li>
<li>
WORLD
</li>
<li>
SPORTS
</li>
</ul>

Answer 2

to position: absolute; something relative to it's parent - you need a positioned parent.
Let's use position:relative; for the a elements:
body{background:#444;}
ul {
background: black;
padding: 0;
}
ul li {
display: inline-block;
cursor: pointer;
/*padding: 20px 10px;*/
}
ul li a {
position:relative; /* add */
display: block; /* add */
padding: 20px 10px; /* add */
text-decoration: none;
color: #FFFFFF;
}
ul li a:hover { /* anchor hover! */
background: #5249FF;
}
ul li a:after { /* anchor after! */
content: '';
width: 10px;
height: 3px;
background: #fff;
position: absolute;
/*top: 20%; 20% of what*/
top: 40px;
/*left: 15px; 15px is not centering*/
left: 0;
right: 0;
margin: 0 auto /* center */
}
<ul>
<li>
HOME
</li>
<li>
WORLD
</li>
<li>
SPORTS
</li>
</ul>
Don't use paddings on LI elements - think about accessibility, rather set your paddings to the Anchor elements, that way their clickable size is expanded.

Answer 3

position:absolute elements are "absolute" relatively to the first position:relative parent, at your example, there is no relative parent, therefore they become relative to body.
What you need to do is to add position:relative to your li element.

Answer 4

You need to use left: 50%; transform:translateX(-50%); inside ul li:after and position:relative; inside ul li
ul {
background: black;
}
ul li {
display: inline-block;
padding: 20px 10px;
cursor: pointer;
position:relative;
}
ul li a {
text-decoration: none;
color: #FFFFFF;
}
ul li:hover {
background: #5249FF;
}
ul li:after {
content: '';
width: 10px;
height: 3px;
background: #fff;
position: absolute;
top: 20%;
left: 50%;
transform:translateX(-50%);
}
<ul>
<li>
HOME
</li>
<li>
WORLD
</li>
<li>
SPORTS
</li>
</ul>