WordPress首页文章底部添加线条

奥多也网络

前言

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

效果

别人的：

[/url]

自己的：

[url=https://www.qcyqq.com/wp-content/uploads/2024/08/fb76e1eeeeacd77427264422446c1021.webp.jpg]

教程

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

1.固定颜色

1. .post-item {
   
2.   position: relative;
   
3. }
   
4. 
   
5. .post-item::before {
   
6.   content: "";
   
7.   position: absolute;
   
8.   bottom: 0;
   
9.   left: 0;
   
10.   width: 0;
    
11.   height: 3px;
    
12.   background: var(--color, #000);
    
13.   transition: width 1s, background-color 0.5s; /* 添加了背景颜色的过渡效果 */
    
14. }
    
15. 
    
16. .post-item:hover::before {
    
17.   width: 100%;
    
18. }
    
19. 
    
20. /* 使用计算来设置颜色 */
    
21. .post-item:nth-of-type(1)::before {
    
22.   --color: hsl(0, 100%, 50%); /* 设置第一个.post-item的线条颜色 */
    
23. }
    
24. 
    
25. .post-item:nth-of-type(2)::before {
    
26.   --color: hsl(72, 100%, 50%); /* 设置第二个.post-item的线条颜色 */
    
27. }
    
28. 
    
29. .post-item:nth-of-type(3)::before {
    
30.   --color: hsl(144, 100%, 50%); /* 设置第三个.post-item的线条颜色 */
    
31. }
    
32. 
    
33. .post-item:nth-of-type(4)::before {
    
34.   --color: hsl(216, 100%, 50%); /* 设置第四个.post-item的线条颜色 */
    
35. }
    
36. 
    
37. .post-item:nth-of-type(5)::before {
    
38.   --color: hsl(288, 100%, 50%); /* 设置第五个.post-item的线条颜色 */
    
39. }
    
40. 
    
41. .post-item:nth-of-type(6)::before {
    
42.   --color: hsl(324, 100%, 50%); /* 设置第六个.post-item的线条颜色 */
    
43. }
    
44. 
    
45. .post-item:nth-of-type(7)::before {
    
46.   --color: hsl(36, 100%, 50%); /* 设置第七个.post-item的线条颜色 */
    
47. }
    
48. 
    
49. .post-item:nth-of-type(8)::before {
    
50.   --color: hsl(108, 100%, 50%); /* 设置第八个.post-item的线条颜色 */
    
51. }
    
52. 
    
53. .post-item:nth-of-type(9)::before {
    
54.   --color: hsl(180, 100%, 50%); /* 设置第九个.post-item的线条颜色 */
    
55. }
    
56. 
    
57. .post-item:nth-of-type(10)::before {
    
58.   --color: hsl(252, 100%, 50%); /* 设置第十个.post-item的线条颜色 */
    
59. }

复制代码

2.动态颜色

1. .post-item {
   
2.   position: relative;
   
3. }
   
4. 
   
5. .post-item::before {
   
6.   content: "";
   
7.   position: absolute;
   
8.   bottom: 0;
   
9.   left: 0;
   
10.   width: 0;
    
11.   height: 3px;
    
12.   background: var(--color, #000);
    
13.   transition: width 1s;
    
14. }
    
15. 
    
16. .post-item:hover::before {
    
17.   width: 100%;
    
18. }
    
19. 
    
20. .post-item:hover::before {
    
21.   animation: randomColor 2s infinite;
    
22. }
    
23. 
    
24. @keyframes randomColor {
    
25.   0% {
    
26.     background: red;
    
27.   }
    
28.   25% {
    
29.     background: blue;
    
30.   }
    
31.   50% {
    
32.     background: green;
    
33.   }
    
34.   75% {
    
35.     background: yellow;
    
36.   }
    
37.   100% {
    
38.     background: purple;
    
39.   }
    
40. }

复制代码