テキスト<a href="#" class="cp_textlink01">リンクテキスト-link text-</a>テキスト

.cp_textlink01 {
  position: relative;
  padding: 5px;
  color: #FB8C00;
  text-decoration: none;/*元々のアンダーラインを非表示にしておく*/
}
.cp_textlink01::after {
  position: absolute;
  bottom: 0;
  left: 0;
  content: '';
  width: 100%;
  transition: all 0.3s ease;
  opacity: 1;
  border-bottom-width: 1px;
  border-bottom-style: dotted;
  border-bottom-color: #FB8C00;
}
.cp_textlink01:hover::after {
  opacity: 1;
  border-bottom-width: 2px;
  border-bottom-style: dashed;
}