在文字后面隐藏边框

Question

我想隐藏文本后面和容器周围的边框的一部分。我目前有这个：

我只需要消失“ LOG IN”（登录）后面的线，并在它后面/前面几个像素。

做到这一点的最佳方法是什么？

我当前的代码：

HTML：

<div class="login">
    <h1 class="header">Log in</h1>

    <div class="row justify-content-center">
        <div class="col-6">
            <form>
                <input type="email" name="emailadres" class="form-control" placeholder="Emailadres">
                <input type="password" name="password" class="form-control" placeholder="Wachtwoord">
                <input type="submit" class="btn btn-success" value="Log in">
            </form>
        </div>
    </div>
</div>

CSS：

// vars
$login-form-background-color: #f7f4f1;
$login-form-color: #00726d;
.login {
  margin-top: 3.5rem;
  background-color: $login-form-background-color;
  border: 3px solid $login-form-color;
  border-radius: 5px;
  & h1 {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    margin: -3rem 0 0 0;
    font-size: 5rem;
    font-family: $font-AnimatedGothicLight;
    color: $login-form-color;
    text-transform: uppercase;
  }
  & form {
    padding: 3.5rem 0;
  }
}