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

我是标题

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

• hello world
• hello world
• hello world
• hello world

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