Обрезать псевдоэлемент внутри заполненной области

У меня есть контейнер с верхним/нижним отступом - его нельзя удалить или поменять местами для поля.

Я пытаюсь создать искусственную границу (синяя линия) справа от зеленого поля, используя псевдоэлемент.

Желтая область существует только для того, чтобы показать, что у зеленого поля есть отступы (я обрезал фон).

Проблема, с которой я сталкиваюсь, заключается в том, что когда я использую высоту 100% для псевдо, он наследует полную высоту родителя, включая отступы, однако я хочу, чтобы мой элемент границы был той же высоты, что и зеленое поле.

Я МОГУ получить размер отступа (и я знаю, как использовать функцию calc), но это потребует многочисленных медиа-запросов, потому что отступы изменчивы, а я пытаюсь этого избежать.

Итак, мне было интересно, есть ли другой способ сделать синюю рамку той же высоты, что и зеленая рамка.

.container {
  margin: 25px;
}

.box-wrapper {
  background-color: yellow;
}

.box {
  box-sizing: border-box;
  height: 200px;
  width: 200px;
  padding: 40px 0;
  background-color: lime;
  background-clip: content-box;
  position: relative;
}

.box::before {
  content: "";
  display: block;
  position: absolute;
  height: 100%;
  width: 5px;
  background-color: blue;
  right: -20px;
}
<div class = "container">
  <div class = "box-wrapper">
    <div class = "box"></div>
  </div>
</div>
Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
CSS: FlexBox
CSS: FlexBox
Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.
4
0
299
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вы можете наследовать тот же отступ, а также обрезать фон:

.container {
  margin: 25px;
}

.box-wrapper {
  background-color: yellow;
}

.box {
  box-sizing: border-box;
  height: 200px;
  width: 200px;
  padding: 40px 0;
  background-color: lime;
  background-clip: content-box;
  position: relative;
}

.box::before {
  content: "";
  display: block;
  position: absolute;
  top:0;
  height: 100%;
  width: 5px;
  background-color: blue;
  background-clip: content-box;
  padding:inherit;
  box-sizing: border-box;
  right: -20px;
}
<div class = "container">
  <div class = "box-wrapper">
    <div class = "box"></div>
  </div>
</div>

Это здорово, Темани - мне никогда раньше не приходилось наследовать отступы, поэтому мне никогда не приходило в голову, что я могу это сделать.

John Ohara 10.04.2019 17:06

Другие вопросы по теме