如何将下划线样式应用于文本片段

Question

每当悬停时，我都希望将下划线样式应用于字符串的一部分。

离）

这是我的代码。

HTML

<a class="test">
  <i>1</i><span>23</span>
</a>

CSS

.test:hover span{
   border-bottom: 1px solid #999999
 }

但是，我不想像下面的代码那样使用span标签。

离）

HTML

<a class="test"><i>1</i>23</a>

CSS

.test:hover{
   border-bottom: 1px solid #999999
}
.test:hover i{
  border-bottom: none !important;
}

但是，它没有用。 我该如何解决？

Answer 1

.test:hover i {border-bottom: 1px solid transparent;}不起作用，因为它基本上充当了.test:hover {border-bottom: 1px solid #999999;}应用于包含元素的行的窗口。

解决此问题的一种方法是改为将线条设置为与背景颜色相匹配，以掩盖.test:hover生成的线条。这确实假设背景是纯色，如果是渐变或图像，则此方法不适合。

.test:hover {
  border-bottom: 1px solid #999999;
}
.test:hover i {
  border-bottom: 1px solid #FFFFFF;
}

<a class="test"><i>1</i>23</a>

Answer 2

你会这样做。 您的内联样式或CSS文件

text-decoration: underline;

Answer 3

由于文本节点不是无法用CSS选择或具有边框的元素。

一旦解决方案是在前面的<i>上使用pseduo元素，该元素位于该元素的底部和右侧，如下所示：

a {
  text-decoration: none;
  font-size: 72px;
  overflow: hidden;
  display: inline-block;
}
a i {
  position: relative;
}
a i::after {
  content: '';
  width: 100px;
  /* some arbitrary large size */
  height: 2px;
  background: red;
  position: absolute;
  top: 100%;
  left: 100%;
}

<a class="test"><i>1</i>23</a>