[分享]css变换字体颜色有下划线

CSS是网页设计中重要的一环，可以实现很多炫酷的效果。其中之一就是变换字体颜色，加上下划线使文字更加突出。 p { color: blue; /文字颜色为蓝色/ textdecoration: und...

CSS是网页设计中重要的一环，可以实现很多炫酷的效果。其中之一就是变换字体颜色，加上下划线使文字更加突出。

 p {
        color: blue; /*文字颜色为蓝色*/
        text-decoration: underline; /*给文字添加下划线*/
        transition: color 1s; /*文字颜色变换动画时长为1s*/
    }
    
    p:hover {
        color: red; /*鼠标悬停时文字颜色变为红色*/
    } 

在上述代码中，使用了CSS的text-decoration属性将下划线添加到文字上。同时也使用transition属性来实现文字颜色的平滑变换效果。

另外，在:hover伪类中更改颜色，可以让文字在鼠标悬停时更加醒目。

通过这种方式，我们可以轻松地为网站的文字添加下划线，并且在颜色变换方面也可以做到很好的效果。