html - :before as wide as element

Question

我已经尝试应用 width 但它没有帮助，我想要的是制作可点击的外部填充。

.btn {
  background-color: red;
  padding: 10px;
  height: 20px;
}

.btn:before {
  content: '';
  min-height: 60px; /*dont mind*/
  width: 100px;
  /*issue*/
  margin: -10px -10px;
  background-color: blue;
  position: absolute;
  z-index: -1;
}

<a href="#" class="btn">btn</a>

如果 pxs 是手动的并且不能使用 %(绝对定位)，我如何将内部宽度与 :before 宽度匹配

Answer 1

使用 position: relative 突然间你可以使用百分比值了。

.btn {
  background-color: red;
  padding: 10px;
  height: 20px;
  position: relative;
}

.btn:before {
  content: '';
  min-height: 60px; /*dont mind*/
  width: 100%;
  /*issue*/
  margin: -10px -10px;
  background-color: blue;
  position: absolute;
  z-index: -1;
}

<a href="#" class="btn">btn</a>