好程序员web前端培训系列分享css伪元素的实用技巧

  1. 云栖社区>
  2. 博客>
  3. 正文

好程序员web前端培训系列分享css伪元素的实用技巧

好程序员 2020-04-26 14:51:16 浏览3422
展开阅读全文

  好程序员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; }

我是标题


效果如下:
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;}

我是标题


根据效果图可以看到伪元素是inline元素类型
3.2清除浮动
解决浮动导致的父元素高度塌陷的问题
.clear:after {
 content: "";
 display: block;
 clear: both;

}
ul{

 background:pink;

}
li{

 float:left;
 margin:0 20px;}

 <li>hello world</li>
 <li>hello world</li>
 <li>hello world</li>
 <li>hello world</li>


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;

}

分割线


效果图:
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;

}

快来和我聊天吧~

效果图如下:
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);}

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

网友评论

登录后评论
0/500
评论
好程序员
+ 关注