CODEWITHSUNDEEP
htmlcss
user7030651
user7030651

Reputation:

Center element of pseudo element

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>
    <a href="#">HOME</a>
  </li>

  <li>
    <a href="#">WORLD</a>
  </li>
  <li>
    <a href="#">SPORTS</a>
  </li>

</ul>

I want white thin line in the center of each li tag.
Any help would be great.
Thank You.

Upvotes: 0

Views: 34

Answers (4)

Roko C. Buljan
Roko C. Buljan

Reputation: 205987

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>
    <a href="#">HOME</a>
  </li>
  <li>
    <a href="#">WORLD</a>
  </li>
  <li>
    <a href="#">SPORTS</a>
  </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.

Upvotes: 1

ankita patel
ankita patel

Reputation: 4251

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>
    <a href="#">HOME</a>
  </li>

  <li>
    <a href="#">WORLD</a>
  </li>
  <li>
    <a href="#">SPORTS</a>
  </li>

</ul>

Upvotes: 1

Rohit Verma
Rohit Verma

Reputation: 3785

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>
    <a href="#">HOME</a>
  </li>

  <li>
    <a href="#">WORLD</a>
  </li>
  <li>
    <a href="#">SPORTS</a>
  </li>

</ul>

Upvotes: 0

felixmosh
felixmosh

Reputation: 35473

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.

Upvotes: 0

Related Questions