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

Question

Following is my HTML/CSS code in which I am trying to add a underline below the text without using native text-decoration: underline property. But somehow this code is not working. Any pointers what I am doing wrong here

HTML Code -

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

CSS Code -

.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 Link - https://codepen.io/anon/pen/VEBNyx

Answer 1

You want to add width to :after when you hover the .test link ? Then you need to write test:hover:after { } . Not just test:hover .

Even though :after is a pseudo-element you must select it if you want to change it's style/s

See below

 .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>