CSS ::before 和 ::after

最新推荐文章于 2024-07-11 21:11:19 发布

转载最新推荐文章于 2024-07-11 21:11:19 发布 · 541 阅读

HTML+CSS 专栏收录该内容

19 篇文章

订阅专栏

本文介绍了一种使用CSS实现的特殊悬浮效果：当鼠标悬停在链接上时，在链接旁边显示方括号。此效果通过使用伪元素::before和::after，并设置特定的内容属性来完成。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

悬浮出现方括号

a {
    position: relative;
    display: inline-block;
    outline: none;
    text-decoration: none;
    color: #000;
    font-size: 32px;
    padding: 5px 10px;
}

a:hover::before, a:hover::after { position: absolute; }
a:hover::before { content: "\5B"; left: -20px; }
a:hover::after { content: "\5D"; right:  -20px; }