CODEWITHSUNDEEP
htmlcss
Hydsoled
Hydsoled

Reputation: 59

how to define pseudo element :: after the same width as its parent

.list li::after{
    content:" ";
    width:100%;
    display: block;
    position: absolute;
    height: 2px;
    background-color: green;
}
ul li a{
    display: inline-block;
    padding: 10px 20px;
    line-height: 1.5;
    font-size: 0.9em;
    color: white;
    text-transform: uppercase;
    font-weight: bold;
    text-decoration: none;
    margin: 0 2.5px;
}

HTML

<ul>
<li><a href="#contact">contact</a></li>
</ul>

When i get over mouse li tag, I want to have liner after it, but this liner should be the same width as his li. Also I don't know how to active ::after, after `:hover.

Upvotes: 2

Views: 858

Answers (2)

Temani Afif
Temani Afif

Reputation: 272590

Use a simple gradient:

ul li a {
  display: inline-block;
  padding: 10px 20px;
  line-height: 1.5;
  font-size: 0.9em;
  text-transform: uppercase;
  font-weight: bold;
  text-decoration: none;
  margin: 0 2.5px;
  
  background-image:linear-gradient(green,green);
  background-size:0% 2px;
  background-position:bottom left;
  background-repeat:no-repeat;
  transition:1s all;
}
a:hover {
  background-size:100% 2px;
}
<ul>
  <li><a href="#contact">contact</a></li>
</ul>

Upvotes: 1

Obsidian Age
Obsidian Age

Reputation: 42304

What I would recommend is to make use of border-bottom on the <a> element. You can control how far away this underline is from the text with padding-bottom.

This avoids the need for ::after completely, and can be seen in the following:

body {
  background: black;
}

ul li a {
  display: inline-block;
  /*padding: 10px 20px;*/
  line-height: 1.5;
  font-size: 0.9em;
  color: white;
  text-transform: uppercase;
  font-weight: bold;
  text-decoration: none;
  margin: 0 2.5px;
  padding-bottom: 10px;
  border-bottom: 1px solid green;
}
<ul>
  <li><a href="#contact">contact</a></li>
</ul>

Note that the width of the line (the border) is controlled by the amount of horizontal padding on the element. I've commented this padding out in the above example to show the line at the exact same width as the link.

Upvotes: 0

Related Questions