Html 如何使：：after和：：before高度相等并对齐？

我有一个链接效应

我添加了红色，这样您就可以看到左边框和右边框（：：before和：：after）的位置不会使两者都平等地接触红色边框。右边的边界有点向外延伸。如果你全屏观看，它可能会更明显

另一方面，悬停效果很好。应该是这样的。我是指在项目上移动鼠标后的效果

：根目录{
框大小：边框框；
}
*,
*：：之前，
*：：之后{
框大小：继承；
}
身体{
保证金：0；
填充：0；
}
.导航菜单{
显示器：flex；
利润率：50像素；
填充：0；
列表样式：无；
}
.nav菜单>li+li{
左边距：1.5em；
}
.nav菜单>li>a{
显示：块；
字号：2rem；
颜色：#0e9daf；
填充：0 20px；
高度：40px；
/*线高：45px*/
文字装饰：无；
/*过渡：颜色0.3s，易于输入输出*/
位置：相对位置；
边框：1px纯红；
}
.nav菜单>li>a:：之前，
.nav菜单>li>a:：之后{
内容：“；
显示：块；
位置：绝对位置；
宽度：40px；
高度：2倍；
/*不透明度：0.2*/
/*指针事件：无*/
背景：#0e9daf；
过渡：均为0.3秒；
}
.nav菜单>li>a:：之前{
排名：0；
左：0；
变换：旋转（90度）；
变换原点：左上角；
}
.nav菜单>li>a:：之后{
右：0；
底部：0；
变换：旋转（90度）；
变换原点：右上角；
}
/*.nav菜单>li>a.active:：之前，
.nav菜单>li>a.active:：之后*/
.nav菜单>li>a:悬停：：之前，
.nav菜单>li>a:悬停：：之后{
左：50%；
变换：旋转（0度）translateX（-50%）；
}

链接悬停效应

试试这个：

.nav menu>li>a:：before{
顶部：-1px；
左：1px；
变换：旋转（90度）；
变换原点：左上角；
}
.nav菜单>li>a:：之后{
右：-2px；
底部：-3px；
变换：旋转（90度）；
变换原点：右上角；
}

试试这个：

.nav menu>li>a:：before{
顶部：-1px；
左：1px；
变换：旋转（90度）；
变换原点：左上角；
}
.nav菜单>li>a:：之后{
右：-2px；
底部：-3px；
变换：旋转（90度）；
变换原点：右上角；
}

将此处从

顶部

更改为

底部

.nav-menu > li > a::after{
    transform-origin: bottom right;
    }

：根目录{
框大小：边框框；
}
*,
*：：之前，
*：：之后{
框大小：继承；
}
身体{
保证金：0；
填充：0；
}
.导航菜单{
显示器：flex；
利润率：50像素；
填充：0；
列表样式：无；
}
.nav菜单>li+li{
左边距：1.5em；
}
.nav菜单>li>a{
显示：块；
字号：2rem；
颜色：#0e9daf；
填充：0 20px；
高度：40px；
/*线高：45px*/
文字装饰：无；
/*过渡：颜色0.3s，易于输入输出*/
位置：相对位置；
边框：1px纯红；
}
.nav菜单>li>a:：之前，
.nav菜单>li>a:：之后{
内容：“；
显示：块；
位置：绝对位置；
宽度：40px；
高度：2倍；
/*不透明度：0.2*/
/*指针事件：无*/
背景：#0e9daf；
过渡：均为0.3秒；
}
.nav菜单>li>a:：之前{
顶部：-1px；
左：0；
变换：旋转（90度）；
变换原点：左上角；
}
.nav菜单>li>a:：之后{
右：0；
底部：-1px；
变换：旋转（90度）；
变换原点：右下角；
}
/*.nav菜单>li>a.active:：之前，
.nav菜单>li>a.active:：之后*/
.nav菜单>li>a:悬停：：之前，
.nav菜单>li>a:悬停：：之后{
左：50%；
变换：旋转（0度）translateX（-50%）；
}

链接悬停效应

将此处从

顶部

更改为

底部

.nav-menu > li > a::after{
    transform-origin: bottom right;
    }

：根目录{
框大小：边框框；
}
*,
*：：之前，
*：：之后{
框大小：继承；
}
身体{
保证金：0；
填充：0；
}
.导航菜单{
显示器：flex；
利润率：50像素；
填充：0；
列表样式：无；
}
.nav菜单>li+li{
左边距：1.5em；
}
.nav菜单>li>a{
显示：块；
字号：2rem；
颜色：#0e9daf；
填充：0 20px；
高度：40px；
/*线高：45px*/
文字装饰：无；
/*过渡：颜色0.3s，易于输入输出*/
位置：相对位置；
边框：1px纯红；
}
.nav菜单>li>a:：之前，
.nav菜单>li>a:：之后{
内容：“；
显示：块；
位置：绝对位置；
宽度：40px；
高度：2倍；
/*不透明度：0.2*/
/*指针事件：无*/
背景：#0e9daf；
过渡：均为0.3秒；
}
.nav菜单>li>a:：之前{
顶部：-1px；
左：0；
变换：旋转（90度）；
变换原点：左上角；
}
.nav菜单>li>a:：之后{
右：0；
底部：-1px；
变换：旋转（90度）；
变换原点：右下角；
}
/*.nav菜单>li>a.active:：之前，
.nav菜单>li>a.active:：之后*/
.nav菜单>li>a:悬停：：之前，
.nav菜单>li>a:悬停：：之后{
左：50%；
变换：旋转（0度）translateX（-50%）；
}

链接悬停效应

我会像下面这样做：

*，
*：：之前，
*：：之后{
框大小：边框框；
}
.导航菜单{
显示器：flex；
填充：0；
列表样式：无；
}
.nav菜单>li+li{
左边距：1.5em；
}
.nav菜单>li>a{
显示：块；
字号：2rem；
颜色：#0e9daf；
填充：0 20px；
高度：40px；
文字装饰：无；
位置：相对位置；
轮廓：1px纯红；
}
.nav菜单>li>a:：之前，
.nav菜单>li>a:：之后{
内容：“；
位置：绝对位置；
宽度：40px；
高度：2倍；
背景：#0e9daf；
过渡：均为0.3秒；
变换：旋转（90度）；
}
.nav菜单>li>a:：之前{
左：0；
排名：0；
变换原点：左上角；
}
.nav菜单>li>a:：之后{
右：0；
底部：0；
转换来源：bot