WordPress首页文章底部添加线条

前言

在某个网站看到鼠标放到首页文章,它的底部会出现线条,于是就突发奇想想给自己网站弄一个

效果

别人的：

自己的：

教程

请将如下两个代码中的任何一个添加到子主题的CSS文件夹中的main.css 中或在主题设置中添加自定义css代码

1.固定颜色

.post-item {
  position: relative;
}

.post-item::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 3px;
  background: var(--color, #000);
  transition: width 1s, background-color 0.5s; /* 添加了背景颜色的过渡效果 */
}

.post-item:hover::before {
  width: 100%;
}

/* 使用计算来设置颜色 */
.post-item:nth-of-type(1)::before {
  --color: hsl(0, 100%, 50%); /* 设置第一个.post-item的线条颜色 */
}

.post-item:nth-of-type(2)::before {
  --color: hsl(72, 100%, 50%); /* 设置第二个.post-item的线条颜色 */
}

.post-item:nth-of-type(3)::before {
  --color: hsl(144, 100%, 50%); /* 设置第三个.post-item的线条颜色 */
}

.post-item:nth-of-type(4)::before {
  --color: hsl(216, 100%, 50%); /* 设置第四个.post-item的线条颜色 */
}

.post-item:nth-of-type(5)::before {
  --color: hsl(288, 100%, 50%); /* 设置第五个.post-item的线条颜色 */
}

.post-item:nth-of-type(6)::before {
  --color: hsl(324, 100%, 50%); /* 设置第六个.post-item的线条颜色 */
}

.post-item:nth-of-type(7)::before {
  --color: hsl(36, 100%, 50%); /* 设置第七个.post-item的线条颜色 */
}

.post-item:nth-of-type(8)::before {
  --color: hsl(108, 100%, 50%); /* 设置第八个.post-item的线条颜色 */
}

.post-item:nth-of-type(9)::before {
  --color: hsl(180, 100%, 50%); /* 设置第九个.post-item的线条颜色 */
}

.post-item:nth-of-type(10)::before {
  --color: hsl(252, 100%, 50%); /* 设置第十个.post-item的线条颜色 */
}

2.动态颜色

.post-item {
  position: relative;
}

.post-item::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 3px;
  background: var(--color, #000);
  transition: width 1s;
}

.post-item:hover::before {
  width: 100%;
}

.post-item:hover::before {
  animation: randomColor 2s infinite;
}

@keyframes randomColor {
  0% {
    background: red;
  }
  25% {
    background: blue;
  }
  50% {
    background: green;
  }
  75% {
    background: yellow;
  }
  100% {
    background: purple;
  }
}