[分享]css出现绿色下划线

CSS是网页设计中常用的一种技术，但有时它会出现绿色下划线的情况，引发设计师和前端工程师的疑惑。

 p {
        text-decoration: underline;
        text-decoration-color: green;
    } 

其实，这种情况是因为在CSS中使用了text-decoration-color属性，该属性是在CSS3中新增的，用于改变文本装饰效果的颜色。

在默认情况下，文本装饰效果的颜色与文本本身颜色相同。但如果使用text-decoration-color属性，则可以将装饰效果的颜色单独设置。

在上述代码中，text-decoration-color属性设置为绿色，所以导致下划线变成了绿色。

如果想要避免出现绿色下划线，可以将text-decoration-color属性去掉或者将其设置为与文本本身颜色相同的颜色即可。

 p {
        text-decoration: underline;
    } 

总之，在使用CSS时，我们需要注意各个属性的效果，以避免出现不必要的错误。