我在我的 CSS 类中使用了 ::before 和 ::after 元素在我的按钮中放置了一个底部边框，但这似乎并没有在我的案例中工作。
我将 ::before 元素标记定位为 absolute 以便边框位于按钮内部，但由于某些原因，边框一直延伸到整个页面只是按钮。
.mydiv {
background-color: #242128;
border-radius: 0;
height: 1000px;
width: 100%;
}
body {
margin: 0px;
}
.mybtn2 {
border: none;
font-size: 2em;
border-radius: 5px;
cursor: pointer;
color: white;
font-family: Serif;
margin-top: 50px;
margin-left: 5%;
background-color: #242128;
padding: 5px 10px;
}
.mybtn2::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-bottom: 2px solid white;
}<body>
<div class="mydiv">
<button class="mybtn2">Hover Me</button>
</div>
</body>最佳答案
你需要 position: relative; 在 .mybtn2 上。
关于css - 无法在 CSS 中使用::after &::before 设置按钮样式，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55025991/