小小千想和您聊一聊

当前位置: 首页> 技术分享> web前端教程之css伪元素的实用技巧

web前端教程之css伪元素的实用技巧

1.定义

伪元素用于创建一些不在文档树中的元素,并为其添加样式。比如说,我们可以通过:before :after来在一个元素前、后增加一些文本,并为这些文本添加样式。虽然用户可以看到这些文本,但是这些文本实际上不在文档树中。

2.伪元素的单双冒号

CSS2之前规范不明确的时,伪元素使用单冒号(:)来表示;

CSS3规范中的要求使用双冒号(::)表示伪元素,以此来区分伪元素和伪类;但为了向上兼容,现在用单冒号(:)也可以的。

3. 使用场景

下面运用before和after在元素前面和后面插入伪元素,实现一些有意思的小效果,代码和效果图附上。

3.1用伪元素实现插入文字、字体图标库

3.1.1插入文字:

h1:before {

 content:"你好";  /* 在标题前面插入文字 并设置样式 */ 

 color: pink;

 font-size: 20px;

 width: 40px;

 height: 40px;  

}

 

<h1>我是标题</h1>

效果如下:

3.1.2插入iconfont字体图标库:

@font-face {

font-family: 'iconfont';

src: url('http://at.alicdn.com/t/font_1274897_t3pj4anz7hg.eot');

src: url('http://at.alicdn.com/t/font_1274897_t3pj4anz7hg.eot?#iefix') format('embedded-opentype'),

url('http://at.alicdn.com/t/font_1274897_t3pj4anz7hg.woff2') format('woff2'),

url('http://at.alicdn.com/t/font_1274897_t3pj4anz7hg.woff') format('woff'),

url('http://at.alicdn.com/t/font_1274897_t3pj4anz7hg.ttf') format('truetype'),

url('http://at.alicdn.com/t/font_1274897_t3pj4anz7hg.svg#iconfont') format('svg');

}

 

h1:before {

font-family: "iconfont" !important;

/* 一定要加 */

content: "\e601";

color: pink;

font-size: 20px;

width: 40px;

height: 40px;

}

 

<h1>我是标题</h1>

根据效果图可以看到伪元素是inline元素类型

3.2清除浮动

解决浮动导致的父元素高度塌陷的问题

.clear:after {

     content: "";

     display: block;

     clear: both;

 }

 ul{

     background:pink;

 }

 li{

     float:left;

     margin:0 20px;

}

 <ul class="clear">

     <li>hello world</li>

     <li>hello world</li>

     <li>hello world</li>

     <li>hello world</li>

 </ul>

3.3分割线效果

p:before{

    content:'';

    display:inline-block;

    width:100px;

    height:2px;

    background:pink;

    margin:5px;

 }

 p:after{

    content:'';

    display:inline-block;

    width:100px;

    height:2px;

    background:pink;

    margin:5px;

 }

 

 

<p>分割线</p>

效果图:


3.4对话框效果

div {

width: 180px;

height: 36px;

line-height: 36px;

background: #c0eeff;

border-radius: 5px;

font-size: 14px;

text-align: center;

position: relative;

}

 

div:before {

content: "";

position: absolute;

top: 10px;

left: -14px;

/* 画三角形 */

width: 0;

height: 0;

border-top: 10px solid transparent;

border-right: 20px solid #c0eeff;

border-bottom: 10px solid transparent;

border-left: 0 solid #c0eeff;

 

}

 

 

<div>快来和我聊天吧~</div>

效果图如下:

3.5 相片层叠效果

div {

width: 400px;

height: 300px;

border: 8px solid #eee;

position: relative;

}

 

div img {

width: 100%;

height: 100%;

}

 

div:before,

div:after {

content: "";

position: absolute;

top: 0;

left: 0;

z-index: -1;

width: 400px;

height: 300px;

border: 8px solid #eee;

transform: rotate(8deg);

}

 

div:after {

transform: rotate(-8deg);

}

 

<div>

<img src="https://gitee.com/ay8yt/imageStore/raw/master/%E4%BA%8C%E9%98%B6%E6%AE%B5%E5%A4%A7%E7%BA%B2/%E5%9B%BE%E7%89%87/QQ%E6%88%AA%E5%9B%BE20200417104911.png">

</div>

效果图如下:


总结

使用伪元素能实现的效果非常多,也可以减少网页中标签的使用,一起动手试试看伪元素的妙用技巧吧。


上一篇:大数据教程之hive存储过程

下一篇:web前端教程之JS栈结构的简单封装

QQ技术交流群

HTML5/Web前端锋迷群
712051083

加入群聊

用户登录

手机号:

密码:

图形验证码:

点击切换

用户注册

手机号:

登录密码:

图形验证码:

点击切换

短信验证码:

获取验证码

忘记密码

1安全验证

2重置密码

手机号:

图形验证码:

短信验证码:

获取验证码

忘记密码

1安全验证

2重置密码

新密码:

确认新密码:

获取课程

添加小千老师微信,获取课程信息

如何获取课程?

一、需拥有此本教材

如没有,可点击下方入口购买当当购买入口京东购买入口

二、添加小千老师,发送拥有凭证,解锁课程资源

1.购买该教材的订单信息
2.拥有的实体书信息等

更换手机号

新手机号:

图形验证码:

短信验证码:

获取验证码