css教程

:before和:after伪元素使用方法

我的站长站 2023-09-18 人阅读

文本内容:

日常开发中我们常常用到:before和:after伪元素在指定标签前和后增加内容,非常方便,例如:

p:before{
       content:'内容';
}
 
p:before{
       content:'内容';
}

 如果是想利用:before和:after伪元素插入图标,我们可以用默认的字符图标或者引入图标库比如IconFont-阿里巴巴矢量图标库或者一张图标图片。

字符图标:

字符图标是计算机自带的图标,无需引入其他第三方文件,非常方便,但是有的用户计算机没有这个字符,就会显示成一个方框。

.example:before {
   content:'\00AB';
    …
}
.example:after {
   content:'\00BB';
    …
}

相关信息
content字符图标大全分享

各种箭头图形样式用于HTML(在字符前加 &#)用于 CSS (在字符前加 ) 和 JavaScript(在字符前加 u)⇠867221E0⇢867421E2⇡867321E1⇣867521E3↞8606219E↠860821A0↟8...

图标库:

图标库可以自定义,灵活很多,但是需要加载很多文件。

首先引入图标库,推荐使用阿里巴巴的Iconfont图标库,不会的看下面教程。

相关信息
阿里巴巴IconFont矢量字体图标库在线工具
阿里巴巴IconFont矢量字体图标库在线工具

搞前端开发、UI设计的应该都知道这款阿里巴巴IconFont矢量字体图标库在线工具,是国产最大的矢量字体图标库了。而且使用非常人性方便,网站没有多余的内容,打开搜索即...

@font-face {
    font-family: 'Iconfont';
    src: url('fonts/Iconfont.eot?7kkyc2');
    src: url('fonts/Iconfont.eot?7kkyc2#iefix') format('embedded-opentype'),
        url('fonts/Iconfont.ttf?7kkyc2') format('truetype'),
        url('fonts/Iconfont.woff?7kkyc2') format('woff'),
        url('fonts/Iconfont.svg?7kkyc2#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
}

CSS中可以重复调用,不会可以看下面详细教程。

span {
    font-family: 'Iconfont';
    font-size: 100px;
    content:'\00BB';
}

相关信息
如何优雅的使用阿里巴巴IconFont字体图标(图文)
如何优雅的使用阿里巴巴IconFont字体图标(图文)

什么叫优雅的使用IconFont字体图标了?就是非常仔细、丝滑、正确的使用,我的站长站从IconFont测试版本开始一直在使用IconFont,总结了许多细节经验分享给大家。1、图...

图片图标:

引入一张图片图标,对于特殊的图标,需要用图片完成的,同样可以before插入到页面中。

p:before{
content:url(iconf.png);/**不可以加“”**/
}

需要注意的是引入图片是content:后面不能用“”包起来,会被理解字符串做内容插入到页面中。

最新更新