如何用CSS实现从右下角向左、向上扩展的边框transition效果？

完全可以只用CSS实现你要的这种边框扩展效果，不需要借助JavaScript。核心是通过伪元素配合transition过渡属性，来控制边框从右下角向左、向上扩展的动画。

实现步骤与代码示例 #

1. HTML结构

先准备一个基础的分类框/按钮结构：

<div class="category-box">设计分类</div>

2. CSS样式实现

/* 容器基础样式 */
.category-box {
  position: relative;
  display: inline-block;
  padding: 12px 24px;
  font-size: 14px;
  color: #333;
  background-color: #fff;
  /* 可选：如果需要默认占位边框，可设置透明边框 */
  /* border: 1px solid transparent; */
  cursor: pointer;
}

/* 底部边框伪元素：初始宽度为0，位于右下角 */
.category-box::after {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  width: 0;
  height: 2px;
  background-color: #2c7edb; /* 替换为你需要的边框颜色 */
  transition: width 0.4s ease; /* 控制动画时长与缓动效果 */
}

/* 右侧边框伪元素：初始高度为0，位于右下角 */
.category-box::before {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  width: 2px;
  height: 0;
  background-color: #2c7edb; /* 和底部边框保持同色 */
  transition: height 0.4s ease;
}

/* hover触发动画 */
.category-box:hover::after {
  width: 100%; /* 底部边框从右向左扩展至全宽 */
}

.category-box:hover::before {
  height: 100%; /* 右侧边框从下向上扩展至全高 */
}

细节调整 #

• 你可以修改transition的0.4s来调整动画速度，ease可以换成linear（匀速）、ease-in-out（慢快慢）等缓动函数，适配你的网站风格。
• 如果需要默认显示基础边框，可给.category-box添加默认边框样式，伪元素的动画边框会覆盖在默认边框之上（注意调整伪元素的z-index确保显示层级正确）。
• 按钮或分类框的尺寸、内边距等样式可根据自己的网站布局自由调整。

内容的提问来源于stack exchange，提问作者Oliver james