免费在线CSS链接样式生成器 - Link States Styling Tool

首页 › 工具 › 在线CSS链接样式生成器

免费在线CSS链接样式生成器，自定义链接四种状态(normal/hover/active/visited)的颜色、下划线、粗细等样式。实时预览交互效果，一键复制CSS代码。无需注册。 | 无需注册 · 数据绝不上传服务器

零依赖·可离线使用

Updated: 2026-07-11

⚙️ 链接状态样式

分别为四种链接伪类状态设置样式。

文字颜色

悬停颜色

激活颜色

已访问颜色

链接字体大小 px

下划线样式

underline (常规下划线) none (无下划线) overline (上划线) line-through (删除线) dotted (点线下划线) dashed (虚线下划线) wavy (波浪线下划线)

悬停下划线偏移 2px

hover时显示下划线 hover时加粗 hover时显示背景

过渡动画时长 200ms

将鼠标悬停、点击链接查看各状态效果。已访问状态需点击后可见。

CSS链接样式通过四个伪类来定义链接的不同交互状态：:link、:visited、:hover、:active。

正确的声明顺序是 :link → :visited → :hover → :active。助记：LoVe/HAte（爱/恨）。如果顺序不对，样式可能不生效。

text-decoration 属性可以组合使用：text-decoration: underline dotted #ff0000 可同时控制线型、样式和颜色。现代浏览器（Chrome 76+、Firefox 70+、Safari 12.1+）支持彩色下划线。

使用 transition 属性让链接状态切换更平滑。建议 150-300ms 的过渡时长，让颜色和样式变化自然流畅。