显示链接部分的另一种样式

Question

我有一个样式链接。现在，我想在链接的几个字母上使用另一种样式，即悬停时的另一种颜色。

示例：

这是正常链接

这是NORM AL 链接，其中 AL 为斜体和其他颜色。

Answer 1

在span中包装想要的文本，并在:hover中设置样式

a:hover span{
font-style: italic;
color:red;
}

<a>THIS IS NORM<span>AL</span> LINK</a>

Answer 2

尝试这个例子

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.min.js"></script>

Answer 3

尝试一下

a{
   color:#333;
   text-transform:uppercase;
   text-decoration:none;
 }
 
a:hover span{
    font-style:italic;
    color:red;
}

<a href="#">This is norm<span>al</span> link</a>