Question

使用伪元素播放更多内容，我想模拟悬停在左侧的列表项元素的底部边框。不幸的是，我可以设法让行增加文本的长度，而不是完整列表项的边框长度。

我在列表项上放了一个边框让你知道我的意思

HTML：

private static <E> void example(BinaryOperator<E> plus, String head, E... values) {
    MyGen<E,E> addition = args -> Arrays.stream(args).reduce(plus).get();
    System.out.println(head + Test.operate(addition, values));
}

CSS：

<div id="orangeNavBar">
<ul>
    <li>Home</li>
    <li>Products</li>
    <li>Company</li>
    <li>Contact</li>
</ul>
</div>

Link to Codepen

Answer 1

如果您添加以下CSS，它应该按预期工作：

ul li {
    position: relative;
}

ul li:after {
    position: absolute;
    bottom: 0;
    left: 0;
}

position: relative需要确保伪元素受<li>的宽度和高度限制，而不是整个<body>。

伪元素的position: absolute;允许您将元素锚定到bottom: 0; left: 0;元素的左下角（<li>）。

Answer 2

您应该使用标记包装文本。
然后为其指定position:relative并将::after的{{1}}值移至li。 以便边框底部仅适用于文字。
并且必须改变一些css属性以完善对齐。

以下是我项目的codepen片段

<强> HTML：

span

<强> CSS：

<ul>
    <li><span>Home</span></li>
    <li><span>Products</span></li>
    <li><span>Company</span></li>
    <li><span>Contact</span></li>
</ul>

底部边界CSS过渡不伸展

2 个答案: