定位：伪元素之前

Question

我正在尝试使用 :before 伪元素实现此容器外观：

我说的是边框和“快速结帐”文本，而不是按钮。

这是我正在使用的布局：

.btn {
  color: #fff;
  background-color: #000;
  border: none;
  font-size: 16px;
  padding: 12px 0;
  max-width: 400px;
  width: 100%;
  border-radius: 5px;
}

<div class="div-1">
    <div class="div-2">
        <button type="button" class="btn">Button</button>
    </div>
</div>

无论我给哪个元素 ...:before {content: "Express checkout"} 我都很难尝试定位和居中文本以及容器。我已经尝试了好几天了，但还是无法正常工作...

有人可以告诉我一种或两种方法吗？我将不胜感激。

我无法更改 HTML 代码。我只能用我所拥有的..

Answer 1

我实际上不会用伪元素来解决它，伪元素需要一个“hacky”定位，而是一个简单的 fieldset 和 legend:

fieldset {
  display: flex;
  justify-content: space-between;
  border-radius: 10px;
}

legend {
  margin: 0 auto;
  padding: 0 10px;
}

.btn {
  color: #fff;
  background-color: #000;
  border: none;
  font-size: 16px;
  padding: 12px 0;
  width: calc(33.3% - 10px);
  max-width: 400px; 
  border-radius: 5px;
}

<fieldset>
  <legend>Express checkout</legend>
  <button type="button" class="btn">Button</button>
  <button type="button" class="btn">Button</button>
  <button type="button" class="btn">Button</button>
</fieldset>

如果您不能像评论中那样更改 HTML，请将边框应用于 div-2。然后使用 position: relative 到 div-1 并将测试作为伪元素添加到 div-1 中，如下面的代码片段所示：

.div-1,
.div-1 * {
  box-sizing: border-box;
}

.div-1 {
  padding-top: 0.5em;
  position: relative;
}

.div-1::after {
  content: "Express checkout";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  background-color: white;
  padding: 0 10px; 
  margin: 0;
}

.div-2 {
  display: flex;
  justify-content: space-between;
  border: 2px solid grey;
  border-radius: 5px;
  padding: 15px 10px 10px 10px;
}


.btn {
  color: #fff;
  background-color: #000;
  border: none;
  font-size: 16px;
  padding: 12px 0;
  max-width: 400px;
  width: calc(33.3% - 10px);
  border-radius: 5px;
}

<div class="div-1">
  <div class="div-2">
    <button type="button" class="btn">Button</button>
    <button type="button" class="btn">Button</button>
    <button type="button" class="btn">Button</button>
  </div>
</div>

定位：伪元素之前

Positioning :before pseudo-element

html

css

pseudo-element