css ::边界对齐之前和::之后

Question

我想给这样的边界。请检查以下代码。

My example

 button {
background: $blue-darker;
border: none;
border-radius: 30px;
padding: 8px 14px;
font-size: 15px;
color: #fff;
position:relative;
display:block;


&:before{
  content: "";
  border:4px solid red;
  position:absolute;
  left:-7px;
  top: -6px;
  width: 104%;
  height: 111%;
  border-radius:30px;
}

}

我的更新代码Updated code

我的问题是，当按钮边框对齐内的内容增加时，也会受到干扰。请给我解决方案。

Answer 1

您需要将动态和静态值组合在一起width: calc(100% + 7px);

$blue: #0084ff;
$blue-darker: darken($blue, 5);
body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

button {
  background: $blue-darker;
  border: none;
  border-radius: 30px;
  padding: 8px 14px;
  font-size: 15px;
  color: #fff;
  position: relative;
  display: block;
  &:before {
    content: "";
    border: 4px solid red;
    position: absolute;
    left: -7px;
    top: -6px;
    width: calc(100% + 7px);
    height: 111%;
    border-radius: 30px;
  }
}

Fiddle

Answer 2

只需在边框上添加一些padding并调整top和left值以适合您的字体大小。

$blue: #0084ff;
$blue-darker: darken($blue, 5);

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

 button {
    background: $blue-darker;
    border: none;
    border-radius: 30px;
    padding: 8px 14px;
    font-size: 16px;
    color: #fff;
    position: relative;
    display: block;
    margin-bottom: 10px;


    &::before{
      content: "";
      border: 4px solid red;
      position: absolute;
      left: -8px;
      top: -8px;
      padding: 4px;
      width: 100%;
      height: 100%;
      border-radius: 30px;
    }
  }

https://jsfiddle.net/d4cugr07/