1<a href="/">基础默认链接</a>
2
3预览：未访问蓝色带下划线，已访问紫色，悬停无额外效果，点击红色。

 1<style>
 2  .basic-link {
 3    text-decoration: none; /* 去下划线 */
 4    color: #2563eb; /* 主色 */
 5    transition: color 0.2s; /* 过渡动画 */
 6  }
 7  .basic-link:visited { color: #7c3aed; } /* 已访问 */
 8  .basic-link:hover, .basic-link:focus { color: #1d4ed8; } /* 悬停/聚焦 */
 9  .basic-link:active { color: #1e40af; } /* 激活 */
10</style>
11<a href="#" class="basic-link">去下划线自定义色链接</a>
12
13/* 预览：无下划线，未访问蓝、已访问紫、悬停深蓝、点击暗蓝，颜色切换平滑。 */

 1<style>
 2  .underline-animate {
 3    text-decoration: none;
 4    color: #1f2937;
 5    position: relative;
 6  }
 7  .underline-animate::after {
 8    content: '';
 9    position: absolute;
10    width: 0;
11    height: 2px;
12    bottom: -2px;
13    left: 0;
14    background-color: #3b82f6;
15    transition: width 0.3s;
16  }
17  .underline-animate:hover::after,
18  .underline-animate:focus::after {
19    width: 100%;
20  }
21</style>
22<a href="#" class="underline-animate">下划线展开动画链接</a>
23预览：默认无下划线，悬停时底部横线从左到右渐显，文字黑色，下划线蓝色。

 1<style>
 2  .btn-link {
 3    text-decoration: none;
 4    color: white;
 5    background-color: #22c55e;
 6    padding: 8px 16px;
 7    border-radius: 6px;
 8    display: inline-block;
 9    transition: background-color 0.2s, transform 0.1s;
10  }
11  .btn-link:hover, .btn-link:focus {
12    background-color: #16a34a;
13    transform: translateY(-1px); /* 轻微上浮 */
14  }
15  .btn-link:active {
16    background-color: #15803d;
17    transform: translateY(0);
18  }
19</style>
20<a href="#" class="btn-link">按钮式链接</a>
21
22预览：绿色圆角按钮，悬停加深绿色并上浮1px，点击恢复原位且颜色更深。

 1<style>
 2  .highlight-link {
 3    text-decoration: none;
 4    color: #dc2626;
 5    background: linear-gradient(to bottom, #fee2e2 0%, #fee2e2 100%);
 6    background-position: 0 100%;
 7    background-repeat: no-repeat;
 8    background-size: 100% 20%;
 9    transition: background-size 0.2s;
10  }
11  .highlight-link:hover, .highlight-link:focus {
12    background-size: 100% 80%;
13  }
14</style>
15<a href="#" class="highlight-link">文字背景高亮链接</a>
16
17预览：红色文字，默认底部浅红高亮条，悬停时高亮条扩大至文字大部分区域。

 1<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.4.0/css/all.min.css">
 2<style>
 3  .icon-link {
 4    text-decoration: none;
 5    color: #374151;
 6    display: inline-flex;
 7    align-items: center;
 8    gap: 6px;
 9    transition: color 0.2s;
10  }
11  .icon-link:hover, .icon-link:focus { color: #0ea5e9; }
12</style>
13<a href="#" class="icon-link"><i class="fa-solid fa-arrow-right"></i> 带图标链接</a>
14
15**预览**：左侧带箭头图标，文字灰色，悬停变蓝色，图标与文字间距6px。

 1<style>
 2  .border-link {
 3    text-decoration: none;
 4    color: #6366f1;
 5    border: 1px solid #6366f1;
 6    padding: 6px 12px;
 7    border-radius: 4px;
 8    transition: all 0.2s;
 9  }
10  .border-link:hover, .border-link:focus {
11    color: white;
12    background-color: #6366f1;
13  }
14</style>
15<a href="#" class="border-link">边框式链接</a>
16
17预览：紫色边框、紫色文字，悬停时背景变紫色、文字变白，过渡平滑。

 1<style>
 2  .disabled-link {
 3    text-decoration: none;
 4    color: #9ca3af;
 5    cursor: not-allowed; /* 禁止指针 */
 6    pointer-events: none; /* 禁止点击 */
 7  }
 8</style>
 9<a href="#" class="disabled-link">禁用状态链接</a>
10
11预览：灰色文字，鼠标移上显示禁止图标，无法点击跳转。

 1<style>
 2  .fold-underline-link {
 3    text-decoration: none;
 4    color: #111827;
 5    font-size: 17px;
 6    position: relative;
 7  }
 8  .fold-underline-link::before,
 9  .fold-underline-link::after {
10    content: '';
11    position: absolute;
12    bottom: -2px;
13    width: 0;
14    height: 2px;
15    background-color: #f97316;
16    transition: width 0.3s ease;
17  }
18  .fold-underline-link::before {
19    left: 50%;
20  }
21  .fold-underline-link::after {
22    right: 50%;
23  }
24  .fold-underline-link:hover::before,
25  .fold-underline-link:focus::before,
26  .fold-underline-link:hover::after,
27  .fold-underline-link:focus::after {
28    width: 50%;
29  }
30</style>
31<a href="#" class="fold-underline-link">折叠下划线链接</a>