Почему скрытое переполнение CSS скрывает границы?

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

Более подробно, overflow:hidden вызывает скрытие, в частности, нижней и правой границ. Возможная причина может заключаться в том, что родительский тег body имеет свойство CSS Grid с выравниванием элементов по центру. Я делаю кнопки, как показано в моем фрагменте кода, и более полный пример в моем Codepen .

Просмотрите фрагмент кода, чтобы увидеть эффект в действии.

В частности, я говорю о кнопке с классом border-4-but. В идеале границы разрастаются следующим образом:

top: расти слева направо и появиться на свет
right: сверху вниз
bottom: слева направо
left: снизу вверх

Пробовал различные свойства переполнения, чтобы решить проблему, но безрезультатно, любые объяснения/альтернативы будут оценены по достоинству.

.border-4-but {
  margin-top: 20px;
  /*   border : solid 3px ; */
  position: relative;
  color: deepskyblue;
  padding: 10px 20px;
  overflow: hidden;
}

.border-4-but:before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  height: 100%;
  width: 100%;
  border-top: solid 2px;
  transition: all 1s;
}

.border-4-but:after {
  content: "";
  position: absolute;
  top: -100%;
  left: 0;
  width: 100%;
  height: 100%;
  border-right: solid 2px;
  transition: all 1s;
}

.border-4-but span:after {
  content: "";
  position: absolute;
  top: 0;
  left: 100%;
  width: 100%;
  height: 100%;
  border-bottom: solid 2px;
  transition: all 1s;
}

.border-4-but span:before {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  height: 100%;
  width: 100%;
  border-left: solid 2px;
  transition: all 1s;
}

.border-4-but:hover:before,
.border-4-but:hover:after,
.border-4-but:hover span:after,
.border-4-but:hover span:before {
  top: 0;
  left: 0;
}

<body>
    // some other buttons 
  <a class = "border-4-but"><span class = "border-4-span"></span>hover here</a>
    // some other buttons 
  </body>

html css

06.06.2024 17:40

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

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

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

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

Все ваши псевдоэлементы :before и :after должны иметь атрибут box-sizing: border-box;. Это заставит систему поместить границу внутри элемента, а не снаружи (так сказать). Итак, ваш код должен быть примерно таким:

.border-4-but:before{
  content : "";
  position : absolute;
  top : 0;
  left : -100%;
  height : 100%;
  width : 100%;
  border-top : solid 2px;
  box-sizing: border-box;
  transition : all 1s;
}
.border-4-but:after{
  content : "";
  position : absolute ;
  top : -100%;
  left : 0;
  width : 100%;
  height : 100%;
  border-right : solid 2px;
  box-sizing: border-box;
  transition : all 1s;
}

.border-4-but span:after{
  content : "";
  position : absolute;
  top : 0;
  left : 100%;
  width : 100%;
  height : 100%;
  border-bottom : solid 2px;
  box-sizing: border-box;
  transition : all 1s;  
}

.border-4-but span:before{
  content : "";
  position : absolute;
  top : 100%;
  left : 0;
  height : 100%;
  width : 100%;
  border-left : solid 2px;
  box-sizing: border-box;
  transition : all 1s;
}

Надеюсь это поможет!

06.06.2024 18:15

Помимо ответа BlenderTimer, overflow:hidden не будет работать с inline элементами. Вам нужно будет добавить display:inline-block в этот <a> контейнер, чтобы границы отображались только тогда, когда они появятся.

.border-4-but {
  display: inline-block;
  margin-top: 20px;
  /*   border : solid 3px ; */
  position: relative;
  color: deepskyblue;
  padding: 10px 20px;
  overflow: hidden;
}

.border-4-but:before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  height: 100%;
  width: 100%;
  border-top: solid 2px;
  box-sizing: border-box;
  transition: all 1s;
}

.border-4-but:after {
  content: "";
  position: absolute;
  top: -100%;
  left: 0;
  width: 100%;
  height: 100%;
  border-right: solid 2px;
  box-sizing: border-box;
  transition: all 1s;
}

.border-4-but span:after {
  content: "";
  position: absolute;
  top: 0;
  left: 100%;
  width: 100%;
  height: 100%;
  border-bottom: solid 2px;
  transition: all 1s;
  box-sizing: border-box;
}

.border-4-but span:before {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  height: 100%;
  width: 100%;
  border-left: solid 2px;
  transition: all 1s;
  box-sizing: border-box;
}

.border-4-but:hover:before,
.border-4-but:hover:after,
.border-4-but:hover span:after,
.border-4-but:hover span:before {
  top: 0;
  left: 0;
}

<a class = "border-4-but"><span class = "border-4-span"></span>hover here</a>

06.06.2024 18:37

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

Текст обтравочного контура вокруг четверти круга (CSS)

Неправильная позиция привязки при использовании параметров позиции-попробования и элемент находится в переполнении

Как я могу создать этот фон, используя градиент вместо изображения?

Некорректное поведение прокрутки в браузере Mozilla Firefox

Угловой материал. Добавьте прозрачный цвет в строку при наведении курсора

Псевдокласс CSS ":is()" с относительными селекторами

Есть ли способ назначить другую cssVariable cssVariable на основе класса, в который она вложена?

Медиа-запросы — проект колледжа для начинающих по HTML и Css

Css работает локально, но не применяется после запуска «npm run build» в сборке в приложении реагирования

Как разместить дочерний элемент CSS-сетки после строки другого дочернего элемента?

Почему скрытое переполнение CSS скрывает границы?

Ответы 2

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

Похожие вопросы