运用CSS制作链接
基础链接样式
通过CSS可以修改链接的默认外观，使其更符合设计需求。链接有四种状态：未访问（:link）、已访问（:visited）、悬停（:hover）和激活（:active）。
a:link {
color: blue;
text-decoration: none;
}
a:visited {
color: purple;
}
a:hover {
color: red;
text-decoration: underline;
}
a:active {
color: green;
}按钮式链接
将链接样式改为类似按钮的效果，增强视觉吸引力。
a.button {
display: inline-block;
padding: 10px 20px;
background-color: #4CAF50;
color: white;
text-decoration: none;
border-radius: 5px;
transition: background-color 0.3s;
}
a.button:hover {
background-color: #45a049;
}链接动画效果
为链接添加过渡或动画效果，提升交互体验。
a.animated {
color: #333;
text-decoration: none;
position: relative;
}
a.animated::after {
content: '';
position: absolute;
width: 0;
height: 2px;
bottom: 0;
left: 0;
background-color: #ff5722;
transition: width 0.3s;
}
a.animated:hover::after {
width: 100%;
}图标链接
在链接旁边添加图标，增强视觉提示。
a.icon-link {
padding-left: 25px;
background-image: url('external-icon.png');
background-repeat: no-repeat;
background-position: left center;
background-size: 20px;
}响应式链接
确保链接在不同设备上都能良好显示。
@media (max-width: 600px) {
a {
font-size: 16px;
padding: 8px 16px;
}
}禁用链接样式
有时需要移除链接的默认下划线或颜色。
a.plain {
color: inherit;
text-decoration: none;
}
a.plain:hover {
text-decoration: none;
}链接伪元素
使用伪元素为链接添加额外装饰。
a.fancy::before {
content: "» ";
color: #ff9800;
}
a.fancy::after {
content: " «";
color: #ff9800;
}
