Question

以下是我的HTML / CSS代码，其中我尝试在文本下方添加下划线而不使用本机text-decoration: underline属性。但是以某种方式，此代码无法正常工作。任何指针我在这里做错了

HTML代码-

<span>
  <a class="test">Add Underline To Text</a>
</span>

CSS代码-

.test {
  position: relative;
  text-decoration: none;
}

.test:hover {
  width: 100%:
}

.test:after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -7px;
  height: 4px;
  background-color: green;
  width: 0;
  transition: width .25s;
}

Codepen链接-https://codepen.io/anon/pen/VEBNyx

Answer 1

您要在悬停width链接时将:after添加到.test吗？然后，您需要编写test:hover:after { }。不只是test:hover。

即使:after是伪元素，如果要更改其样式，也必须选择它

见下文

.test {
  position: relative;
  text-decoration: none;
}

.test:hover:after {
  width: 100%;
}

.test:after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -7px;
  height: 4px;
  background-color: green;
  width: 0;
  transition: width .25s;
}

<span>
  <a class="test">Add Underline To Text</a>
</span>

使用文本装饰下划线向文本添加下划线-CSS

1 个答案: