Я пытаюсь добиться этого вида контейнера, используя псевдоэлемент :before:

enter image description here

Я говорю о рамке и тексте «Экспресс-касса», а не о кнопках.

Вот макет, с которым я работаю:

.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"}, мне очень трудно позиционировать и центрировать текст, а также контейнер. Я пытаюсь несколько дней и не могу заставить его работать ...

Может ли кто-нибудь показать мне способ или 2 того, как это можно сделать? Я буду очень признателен.

Не могу изменить HTML-код. Я могу работать только с тем, что у меня есть ..

-1
JOKKER 28 Мар 2021 в 23:45

1 ответ

Лучший ответ

На самом деле я бы не стал решать эту проблему с помощью псевдоэлементов, требующих "хакерского" позиционирования, а только простых 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, как в комментарии, примените границу к {{X 0}}. Затем используйте позицию: относительно 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>
2
tacoshy 28 Мар 2021 в 21:22