之前看到的觉得很有意思的a标签的css样式
效果如下
代码如下：
<style> :root { --link-background-color: 189, 195, 199; --link-background-opacity: 0.5; --link-background-opacity-hover: 0.7; --accent-color: #34495e; } a { text-decoration: none; color: var(--accent-color); } a.link { box-shadow: 0px -2px 0px rgba(var(--link-background-color), var(--link-background-opacity)) inset; transition: all 0.3s ease; } a.link:hover { box-shadow: 0px -10px 0px rgba(var(--link-background-color), var(--link-background-opacity-hover)) inset; } del { background-color: #ddd; border-radius: 2px; color: rgba(0, 0, 0, 0); text-decoration: none; cursor: default; /* -webkit-transition: color .15s ease, background-color .15s ease; */ /* -o-transition: color .15s ease, background-color .15s ease; */ transition: color .15s ease, background-color .15s ease } del:hover { color: #383838; background-color: rgba(0, 0, 0, 0) } </style> </head> <body> <a class="link" rel="noopener" href="https://blog.jimmycai.com/p/new-theme-stack/">我有一壶酒，足以慰平生</a> <del> 一颗草莓头子 </del> </body>