如何仅用一个:before或:after为按钮设置带左右20px间距的左右边框

Hey there! Let’s get this sorted for you. You want to add left and right borders to your button using just one pseudo-element, while keeping 20px of spacing between the button and those borders. Let’s tweak your code to make this work perfectly.

What’s Off with the Current Code? #

Your existing .btn:before is creating a horizontal line, which isn’t what we need. Instead, we’ll leverage the .border container’s pseudo-element to build both vertical borders in one go—since it wraps the button, this is the ideal parent to target.

Modified Working Code #

.btn-action {
  display: flex!important;
  flex-direction: column!important;
  justify-content: center!important;
  align-items: center!important;
  display: block;
  text-align: center;
  max-width: 800px;
  margin: 0 auto;
  background-color: gray;
  height: 400px;
}

.btn {
  display: inline-block;
  font-size: 18px;
  line-height: 24px;
  color: #fff;
  padding: 12px 32px;
  border: 2px solid #C3A165;
  text-transform: uppercase;
  font-weight: 500;
  background-color: transparent;
  border-radius: 0;
  text-decoration: none;
  transition: 0.3s all;
}

.btn:hover {
  background-color: #C3A165;
  color: #fff;
  border-color: #C3A165;
}

/* Core fix for borders and spacing */
.border {
  position: relative;
}

.border:before {
  content: '';
  position: absolute;
  /* Stretch pseudo-element to match the button's height */
  top: 0;
  bottom: 0;
  /* Push borders 20px outward to create spacing */
  left: -20px;
  right: -20px;
  /* Add left and right borders with one pseudo-element */
  border-left: 2px solid #C3A165;
  border-right: 2px solid #C3A165;
  /* Optional: Match hover transition to the button */
  transition: border-color 0.3s;
}

/* Sync border color with button hover state */
.border:hover:before {
  border-color: #C3A165; /* Adjust if you want a different hover color */
}

<section class="btn-action">
  <div class="border">
    <a href="#" class="btn primary">Get Started</a>
  </div>
</section>

Key Details to Note: #

• .border container: We set position: relative so the pseudo-element can anchor to it. No extra padding needed here—we’ll handle spacing directly with the pseudo-element’s positioning.
• .border:before:
  • position: absolute lets us stretch the pseudo-element to the full height of the button (using top: 0 and bottom: 0).
  • left: -20px and right: -20px push the borders 20px away from the button, creating the exact spacing you need.
  • border-left and border-right add both vertical lines in one single pseudo-element—checks your main requirement!
• Hover consistency: We added a transition for the border color to match the button’s hover effect, so the whole element feels cohesive.

This keeps your original structure intact while hitting all your design goals.

内容的提问来源于stack exchange，提问作者Dharmesh Vekariya