частичные границы в CSS: Creative Illusion

это может быть желательно создавать коробки с границами, которые появляются только на определенных сторонах или только расширяются. частично через край. Несмотря на отсутствие прямой поддержки в CSS, этот эффект может быть элегантно достигнут с помощью простого и гибкого метода.

рассмотрим, например, коробку ширины 350px с нижней границей, которая простирается только на 60 пикселей слева. Это можно воспроизвести со следующим CSS -кодом:

div {
  width: 350px;
  height: 100px;
  background: lightgray;
  position: relative;
  margin: 20px;
}

div:after {
  content: '';
  width: 60px;
  height: 4px;
  background: gray;
  position: absolute;
  bottom: -4px;
}

магия заключается в Div: после псевдоэлемента. Это создает пустую коробку, расположенную абсолютно внизу главной коробки. Регулируя свойства ширины и нижней части, мы можем контролировать размер и положение частичной границы. Это не требует дополнительной разметки, что приводит к чистому и обслуживаемому коду. Он также разрушается в браузерах, которые не поддерживают позицию: абсолютно.