对象之间的文本装饰空间

Question

如何在边框之间留出空格（underline悬停效果）。并且线条的颜色应该是红色。

＆＃13;

＆＃13;

a {
  text-decoration: none
}

li {
  display: inline;
}

li:hover {
  text-decoration: underline;
}

＆＃13;

<li><a href="">
  abc
</a></li>
<li><a href="">
  def
</a></li>
<li><a href="">
  ggg
</a></li>
<li><a href="">
  hello
</a></li>

＆＃13;

＆＃13;

＆＃13;

Answer 1

使用border-bottom和padding代替

＆＃13;

＆＃13;

a {
  text-decoration: none
}
li {
  display: inline-block;
}
li:hover {
  border-bottom: 1px solid red;
  padding-bottom: 10px;
}

＆＃13;

<li><a href="">
  abc
</a>
</li>
<li><a href="">
  def
</a>
</li>
<li><a href="">
  ggg
</a>
</li>
<li><a href="">
  hello
</a>
</li>

＆＃13;

＆＃13;

＆＃13;

Answer 2

如果您使用text-decoration，则会创建默认线，但如果您想要自定义，则使用border-bottom代替更改颜色和线条大小以及填充间距。

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>

Answer 3

由于您的结束</a>标记位于下一行，HTML浏览器会将多个空格折叠为一个空格，这就是您在空白区域中看到下划线的原因。

所以第一个（有点乏味）选项是在文本后面关闭你的结束标记。

此外，您需要将最后一个CSS更改为li:hover a

＆＃13;

＆＃13;

a {
  text-decoration: none
}

li {
  display: inline;
}

li:hover a {
  text-decoration: underline;
}

＆＃13;

<li><a href="">
  abc</a>
</li>
<li><a href="">
  def</a>
</li>
<li><a href="">
  ggg</a>
</li>
<li><a href="">
  hello</a>
</li>

＆＃13;

＆＃13;

＆＃13;

Answer 4

    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>