CSS中before伪元素不显示、after伪元素超出a标签问题咨询

问题根因 #

• li::before无法显示：你为该伪元素设置了height: 100%，但父元素li没有设置明确高度，百分比高度无法计算生效，伪元素最终高度为0，自然不可见。
• a::after宽度超出a标签范围：a标签默认是行内元素，宽度仅由内容撑开，但你给::after设置了display: block，块级元素的宽度默认继承父级li的整行宽度，而非a标签的文本宽度，就会出现溢出效果。

实现方案 #

做以下几处修改即可实现hover显示、after长度为文本长度50%的需求：

1. 给li添加position: relative，作为::before伪元素的定位参照，同时为::before设置固定高度，默认隐藏
2. 给a标签添加position: relative、display: inline-block，让a的宽度贴合文本内容，作为::after伪元素的定位参照
3. 调整::after的宽度为50%，默认隐藏，仅在li hover时展示两个伪元素

完整修改后的CSS代码 #

*{
    margin: 0;
    padding: 0;
    text-decoration: none;
    list-style: none;
}
.menu{
    height: 100vh;
    width: 80%;
    display: flex;
    align-items: center;
}
.menuText{
    font-size: 2rem;
    padding-left: 2rem;
}
.menuText ul li{
    padding-top: 2rem;
    position: relative; /* 新增：作为before的定位父级 */
}
/* 修改li::before样式 */
.menuText ul li::before{
    content: '';
    position: absolute;
    left: -1rem; /* 调整竖线显示在文本左侧 */
    top: 50%;
    transform: translateY(-50%);
    display: block;
    height: 2rem; /* 固定高度，匹配行高 */
    width: .25rem;
    background-color: #000;
    opacity: 0; /* 默认隐藏 */
    transition: 0.2s all; /* 可选加过渡效果 */
}
/* 新增a标签的样式 */
.menuText ul li a{
    display: inline-block;
    position: relative;
    color: #000;
}
/* 修改a::after样式 */
.menuText ul li a::after{
    content: '';
    width: 50%; /* 改为文本长度的50% */
    height: .25rem;
    left: 0;
    bottom: -0.25rem; /* 调整显示在文本下方 */
    background-color: #000;
    position: absolute;
    display: block;
    opacity: 0; /* 默认隐藏 */
    transition: 0.2s all; /* 可选加过渡效果 */
}
/* hover时显示两个伪元素 */
.menuText ul li:hover::before,
.menuText ul li:hover a::after{
    opacity: 1;
}

内容的提问来源于stack exchange，提问作者shoumiksk