日志-2024-09-18
我又给 <a> 标签加了一个酷酷的 hover 效果，有下面两种 <a> 标签使用了 hover 效果：
- 没有
class和title属性 class属性中有nav_item但没有nav_brand
我把自定义的效果写成 SASS 格式并写到主题给的 _custom.sass 文件里。
1a
2 &:not([class]):not([title])
3 position: relative
4 &:after
5 content: ''
6 position: absolute
7 left: 0
8 bottom: -5px
9 display: inline-block
10 height: 1px
11 background-color: #0077b8
12 width: 0
13 opacity: 0
14 transition: opacity 0.35s, width 0.35s
15 &:hover:after
16 opacity: 1
17 width: 100%
18 &.nav_item:not(.nav_brand)
19 position: relative
20 &:after
21 content: ''
22 position: absolute
23 left: 0
24 bottom: -5px
25 display: inline-block
26 height: 1px
27 background-color: #0077b8
28 width: 0
29 opacity: 0
30 transition: opacity 0.35s, width 0.35s
31 &:hover:after
32 opacity: 1
33 width: 100%
代码块标上 SASS 会导致渲染出错，故标成 CSS。
同时我给其他博客的链接创建了卡片，也是使用 shortcode：
1{{/* friend.html */}}
2
3<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
4
5{{ $link := .Get "link" }}
6{{ $img := .Get "img" }}
7{{ $txt := .Get "txt" }}
8
9<div class="friend-link-card">
10 <div class="friend-content">
11 <div class="friend-imgBx">
12 <img src="{{ $img }}">
13 </div>
14 <div class="friend-text-content">
15 <a href="{{ $link }}" target="_blank" rel="noopener noreferrer">{{ $txt }}</a>
16 </div>
17 </div>
18</div>
19
20<style>
21 .friend-link-card * {
22 margin: 0;
23 padding: 0;
24 box-sizing: border-box;
25 }
26
27 .friend-link-card {
28 padding: 0.5rem 1rem;
29 width: 25%;
30 outline: none;
31 color: var(--text);
32 background: var(--post-bg);
33 border: 1px solid var(--border);
34 border-radius: 8px;
35 font-size: 1rem;
36 box-shadow: 0 0.25rem 1rem rgba(0, 0, 0, 0.1);
37 margin-top: 10px;
38 min-width: 300px;
39 }
40
41 .friend-content {
42 display: flex;
43 align-items: center;
44 }
45
46 .friend-imgBx {
47 position: relative;
48 margin-right: 40px;
49 padding: 10px 0;
50 }
51
52 .friend-imgBx img {
53 width: 80px;
54 height: 80px;
55 border-radius: 50%;
56 display: block;
57 }
58
59 .friend-text-content {
60 flex: 1;
61 position: relative;
62 }
63
64 .friend-text-content a:after {
65 content: '';
66 position: absolute;
67 left: 0;
68 bottom: -5px;
69 display: inline-block;
70 height: 1px;
71 background-color: #0077b8;
72 width: 0;
73 opacity: 0;
74 transition: opacity 0.35s, width 0.35s;
75 }
76
77 .friend-text-content a:hover:after {
78 opacity: 1;
79 width: 100%;
80 }
81</style>