一些伪类：after和：before的用法

最新推荐文章于 2025-06-08 14:44:46 发布

码伍的blog

最新推荐文章于 2025-06-08 14:44:46 发布

阅读量2.2k

点赞数

CC 4.0 BY-SA版权

分类专栏： css

本文链接：https://blog.youkuaiyun.com/Acosta_blog/article/details/77581658

css 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了CSS伪元素的多种实用技巧，包括使用`:after`和`:before`制作关闭按钮、清除浮动及创建背景小图标等。同时展示了如何利用这些伪元素实现链接悬停时显示方括号的效果。

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

CSS中存在一些比较特殊的属性，称之为伪类所有主流浏览器都支持 :after 伪元素，但对于IE来说，只有IE8以上版本支持。

进入正题：

1.制作关闭按钮

html:

<div style="height: 100px; width: 100px; border: 1px solid black; position: relative;">
	    <span class="close"></span>
</div>

css：

.close {
       display: block;
       background: orange;
       color: red;
       border-radius: 12px;
       line-height: 20px;
       text-align: center;
       height: 20px;
       width: 20px;
       font-size: 18px;
       padding: 1px;
     }
   .close:after,.close:before {
       content: "";
        width: 20px;
       height: 2px;
       background: #fff;
       display: block;
       position: absolute;
       left: 0;
       top: 0;
    }
    .close:after {
       transform: rotate(45deg);
    }    
    .close:before {
       transform: rotate(-45deg);
    }

效果：

2.清除浮动

3.特效妙用

鼠标移上链接，出现方括号：

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; }

效果：