css伪元素的实用技巧

╰+攻爆jí腚メ 2022-11-28 10:48 190阅读 0赞

## **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>

效果如下：

![format_png][]

**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元素类型

![format_png 1][]

**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>

**效果图：**

![format_png 2][]

**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>

效果图如下：

![format_png 3][]

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

效果图如下：

![format_png 4][]

## **总结** ##

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

[format_png]: /images/20221124/89c1cf0b17794f8c9aabcaea9ebe3d20.png
[format_png 1]: /images/20221124/cca33cfcce494cd3923ecedace308280.png
[format_png 2]: /images/20221124/4733bae3113e41099b1c8fdfad792633.png
[format_png 3]: /images/20221124/7a0d79d8c8874ea885eef728b1f731ca.png
[format_png 4]: /images/20221124/01cc1ad816574fba95c70466ff5b8d28.png