css偽元素的實用技巧是什么

本篇內容介紹了“css偽元素的實用技巧是什么”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！

1.定義：偽元素用于創建一些不在文檔樹中的元素，并為其添加樣式。比如說，我們可以通過:before :after來在一個元素前、后增加一些文本，并為這些文本添加樣式。雖然用戶可以看到這些文本，但是這些文本實際上不在文檔樹中。

2.偽元素的單雙冒號

在CSS2之前規范不明確的時，偽元素使用單冒號(:)來表示；

在CSS3規范中的要求使用雙冒號(::)表示偽元素，以此來區分偽元素和偽類；但為了向上兼容，現在用單冒號（:）也可以的。

3. 使用場景

下面運用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偽元素的實用技巧是什么”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！