无法在 CSS 中使用 ::after & ::before 设置按钮样式

Question

我在我的 CSS class 中使用了 ::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>

Answer 1

您需要 position: relative; .mybtn2。

无法在 CSS 中使用 ::after & ::before 设置按钮样式

Can't style the button using ::after & ::before in CSS

css

pseudo-element