CODEWITHSUNDEEP
htmlcssunderline
Jessie Campbell
Jessie Campbell

Reputation: 67

text-decoration space between object

How can I have space between the border (underline hover effect). and the color of the line should be red.

a {
  text-decoration: none
}

li {
  display: inline;
}

li:hover {
  text-decoration: underline;
}
<li><a href="">
  abc
</a></li>
<li><a href="">
  def
</a></li>
<li><a href="">
  ggg
</a></li>
<li><a href="">
  hello
</a></li>

Upvotes: 0

Views: 260

Answers (4)

Saika
Saika

Reputation: 396

    a {
    text-decoration:none;
    display:block;
      position:relative;
      padding-bottom:20px;
    }

    li{
    display:inline-block;
      
    }
    li:hover a:after {
      content:"";
      position:absolute;
      height:1px;
      width:100%;
      left:0;
      bottom:0;
      background:red;
      
    }
<li><a href="">
      abc
    </a>
    </li>
    <li><a href="">
      def
    </a>
    </li>
    <li><a href="">
      ggg
    </a>
    </li>
    <li><a href="">
      hello
    </a>
    </li>

Upvotes: 0

Shashank Agrawal
Shashank Agrawal

Reputation: 25797

Since your closing </a> tag is on the next line and HTML browsers collapse multiple spaces into one space that is why you are seeing that underline in the white space.

So the first (a bit tedious) option is to close your end tags just after the text.

Also, you need to change your last CSS to li:hover a

a {
  text-decoration: none
}

li {
  display: inline;
}

li:hover a {
  text-decoration: underline;
}
<li><a href="">
  abc</a>
</li>
<li><a href="">
  def</a>
</li>
<li><a href="">
  ggg</a>
</li>
<li><a href="">
  hello</a>
</li>

Upvotes: 0

dippas
dippas

Reputation: 60563

use border-bottom and padding instead

a {
  text-decoration: none
}
li {
  display: inline-block;
}
li:hover {
  border-bottom: 1px solid red;
  padding-bottom: 10px;
}
<li><a href="">
  abc
</a>
</li>
<li><a href="">
  def
</a>
</li>
<li><a href="">
  ggg
</a>
</li>
<li><a href="">
  hello
</a>
</li>

Upvotes: 1

Gaurav Aggarwal
Gaurav Aggarwal

Reputation: 10187

If you use text-decoration it will create default line but if you want customised then use border-bottom instead to change the colors and line size and padding for spacing in between.

a {
  text-decoration: none
}

li {
  display: inline;
}

li:hover {
  border-bottom:1px solid red;
  padding-bottom:5px;
}
<li><a href="">
  abc
</a></li>
<li><a href="">
  def
</a></li>
<li><a href="">
  ggg
</a></li>
<li><a href="">
  hello
</a></li>

Upvotes: 0

Related Questions