Javascript 如何实现悬停路由器链接时显示下划线的过渡效果？_Javascript_Css_Reactjs_React Router Dom

Javascript 如何实现悬停路由器链接时显示下划线的过渡效果？

javascript css reactjs

Javascript 如何实现悬停路由器链接时显示下划线的过渡效果？,javascript,css,reactjs,react-router-dom,Javascript,Css,Reactjs,React Router Dom,我在react项目中使用react路由器dom节点包来实现路由设置路由器链接后，我默认使用以下自定义CSS隐藏链接下划线： let styles = theme => ({ TextLink: { position: 'relative', color: 'white', textDecoration: 'none', '&:hover':{ color: 'white', }, }

我在react项目中使用react路由器dom节点包来实现路由

设置路由器链接后，我默认使用以下自定义CSS隐藏链接下划线：

let styles = theme => ({
   TextLink: {
      position: 'relative',
      color: 'white',
      textDecoration: 'none',    
      '&:hover':{
            color: 'white',
      },
});

用这个我可以隐藏起来

我的目标是使链接在悬停时显示下划线，并使链接下划线从中心向两端增长

使用任何附加节点包修改CSS或代码示例都会很有帮助。

以下示例是在纯CSS中完成的

reactjs中的链接基本上是一个标签，因此您可以使用以下css

@进口urlhttps://fonts.googleapis.com/css?family=Montserrat:500; 身体{ 字体系列：“蒙特塞拉特”，无衬线； } ol,，保险商实验室{ 列表样式：无； } 李{ 显示：内联块；填充：20px 0 20px； } a{ 文字装饰：无；位置：相对位置；显示：块；填充：16px0；边际：0.12px；字号：1.2rem；文本转换：大写；过渡色：颜色0.1s，背景色0.1s；颜色：000； } a:悬停{ 颜色：4dd0e1； } a:专注，a:主动{ 颜色：00bcd4； } a:以前{ 内容：；显示：块；位置：绝对位置；最高：100%；高度：3倍；宽度：100%；背景色：00bcd4； -webkit变换原点：中间-顶部；变换原点：中心-顶部； -webkit转换：scale0，1；变换：scale0，1；过渡：颜色0.1s，-webkit变换0.2s缓变；过渡：颜色0.1s，过渡0.2s；过渡：颜色0.1s，变换0.2s缓减，-webkit变换0.2s缓减； } a:活动：：之前{ 背景色：00bcd4； } a:悬停：：之前， a:焦点：之前{ -webkit变换原点：中间-顶部；变换原点：中心-顶部； -webkit转换：scale1，1；变换：scale1，1； }

下面的示例是在纯css中完成的

reactjs中的链接基本上是一个标签，因此您可以使用以下css