CSS伪类:before 和 :after

Web 专栏收录该内容
146 篇文章 0 订阅

CSS用了许久,对一些伪类熟视无睹,从不想着去搞清楚一下。比如说这个

:before
:after

其实,:before 表示该标记前面的样式,反之 :after 代表设置后面的样式。网页上常常看到有些文字前或后有小图标,用的就是这种样式:
这里写图片描述

对应的代码有:

<button type="button" class="btn text" onclick="Search();"><i class="icon-search"></i> 查询</button>
<button type="button" onclick="clearSerach()" class="btn"><i class="icon-trash"></i> 清除</button>

图标正是<i>这里设置出来的。众所周知,<i> 只是一个代表斜体的标记而已,之所以用在这里,只是看中它不占地方,方便设置:before :after 而已。

那究竟如何设置图标呢?关键在于 content 这个CSS属性。 content 代表插入内容,并且似乎常跟:before :after 配对使用。像上面这个例子,就可以是

.icon-search:before{
    content: "\e000";/* 放大镜符号 */
    font-size: 16px;
}

有关这个content属性,还可以对应许多内容,具体可参考
http://www.zhangxinxu.com/wordpress/2010/04/css-content%E5%86%85%E5%AE%B9%E7%94%9F%E6%88%90%E6%8A%80%E6%9C%AF%E4%BB%A5%E5%8F%8A%E5%BA%94%E7%94%A8/

如果想将这些插入内容去掉怎么办呢?比如说,伸缩搜索框,按钮未点击前有“查找”二字,点击后字消失:
这里写图片描述

这里写图片描述

代码就可以这样写:

.sb-icon-search:before {
    content: "\e000";
}

.sb-icon-search:after {
    content: "\20查\20找";/* \20 代表空格 */
    color: #555;
}

.sb-search.sb-search-open .sb-icon-search:after,
.no-js .sb-search .sb-icon-search:after {
    content: "";
}

将 content 设为”“,就啥都没有了。

源代码下载

  • 4
    点赞
  • 3
    评论
  • 2
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 代码科技 设计师:Amelia_0503 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值