如何把按钮放在线内？

Question

我想要的是这样的东西：

-------------------按钮------------------

我知道如何将文字放在行内，但是当我按下按钮时看起来并不好看。有什么建议吗？

Answer 1

您可以尝试使用after和before添加一行。

button {
  padding: 0 100px;
  overflow: hidden
}
button span {
  display: inline-block;
  position: relative;
  height: 100%;
}
button > span:after {
  content: '';
  border-bottom: 1px dotted #000;
  height: 1px;
  width: 1000%;
  position: absolute;
  left: calc(100% + 5px);
  top: calc(50% - 1px);
}
button > span:before {
  content: '';
  border-bottom: 1px dotted #000;
  height: 1px;
  width: 1000%;
  position: absolute;
  right: calc(100% + 5px);
  top: calc(50% - 1px);
}

<button type="button">
  <span>Button</span>
</button>