我正在克隆Quizlet.com.卡在主屏幕样式上。将鼠标悬停在卡片上会添加一条下划线，表示该卡片已被选中。

时：Quizlet：

我的网站：

时：

鼠标悬停在“我的网站”上时：

我在CSS中添加了border-bottom，它被添加在区域之外，而不是在DIV标签的区域之内。

编辑：卡被推出去的现象得到了化解。但我不喜欢纸牌下面有阴影。我会附上一张照片。

顺晟科技：

我想您会知道在Quizlet中的DIV中做了什么。

您可以尝试两个选项：

• box-shadow

• ::after伪元素

box-shadow：

可能是最短的解决方案-通过指定相同的box-shadow和blur（分别为第3个和第4个参数），创建仅在底部可见的spread

<代码><；DIV>；<；/DIV>；

注意：不符合OP的要求-轮廓在外面，而不是里面

::after伪元素

绝对定位一个高度为<div></div>、宽度为::after、边框为0px的元素，该元素位于100%的底部，其10px

<代码><；DIV>；<；/DIV>；D