本篇内容介绍了“css伪元素的实用技巧是什么”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！
在CSS2之前规范不明确的时，伪元素使用单冒号(:)来表示；
在CSS3规范中的要求使用双冒号(::)表示伪元素，以此来区分伪元素和伪类；但为了向上兼容，现在用单冒号（:）也可以的。
下面运用before和after在元素前面和后面插入伪元素，实现一些有意思的小效果，代码和效果图附上。
3.1用伪元素实现插入文字、字体图标库
3.1.1插入文字：
h2:before {
content:"你好"; /* 在标题前面插入文字 并设置样式 */
color: pink;
font-size: 20px;
width: 40px;
height: 40px; }
<h2>我是标题</h2>
效果如下：
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');}
h2:before {
font-family: "iconfont" !important;
/* 一定要加 */
content: "\e601";
color: pink;
font-size: 20px;
width: 40px;
height: 40px;}
<h2>我是标题</h2>
根据效果图可以看到伪元素是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://cache.yisu.com/upload/information/20200706/149/58194.png"></div>
“css伪元素的实用技巧是什么”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注亿速云网站，小编将为大家输出更多高质量的实用文章！
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
