碼上快樂

相關內容    簡體    繁體

before和after的用法

本文轉載自   查看原文   2020-11-29 16:03   432    css/ html
轉載：https://blog.csdn.net/lurr88/article/details/79754811

一、介紹

css3為了區分偽類和偽元素，偽元素采用雙冒號寫法。(:before和:after是在CSS2中提出來的，CSS3中的寫法是::before和::after)

常見偽類——:hover,:link,:active,:target,:not(),:focus。

常見偽元素——::first-letter,::first-line,::before,::after,::selection。

::before和::after下特有的content，用於在css渲染中向元素邏輯上的頭部或尾部添加內容。

這些添加不會出現在DOM中，不會改變文檔內容，不可復制，僅僅是在css渲染層加入。

所以不要用:before或:after展示有實際意義的內容，盡量使用它們顯示修飾性內容，例如圖標。

舉例：網站有些聯系電話，希望在它們前加一個icon☎，就可以使用:before偽元素，如下：

<!DOCTYPE html>
<meta charset="utf-8" />
<style type="text/css">
    .phoneNumber::before {
    content:'\260E';
    font-size: 15px;
}
</style>
<p class="phoneNumber">12345645654</p>

Note:

1、這些特殊字符的html，js和css的寫法是不同的，如下

 

⇠  箭頭類

符號 UNICODE 符號 UNICODE
HTML JS CSS HTML JS CSS
⇠ &#8672 \u21E0 \21E0 ⇢ &#8674 \u21E2 \21E2
⇡ &#8673 \u21E1 \21E1 ⇣ &#8675 \u21E3 \21E3
↞ &#8606 \u219E \219E ↠ &#8608 \u21A0 \21A0
↟ &#8607 \u219F \219F ↡ &#8609 \u21A1 \21A1
← &#8592 \u2190 \2190 → &#8594 \u2192 \2192
↑ &#8593 \u2191 \2191 ↓ &#8595 \u2193 \2193
↔ &#8596 \u2194 \2194 ↕ &#8597 \u2195 \2195
⇄ &#8644 \u21C4 \21C4 ⇅ &#8645 \u21C5 \21C5
↢ &#8610 \u21A2 \21A2 ↣ &#8611 \u21A3 \21A3
⇞ &#8670 \u21DE \21DE ⇟ &#8671 \u21DF \21DF
↫ &#8619 \u21AB \21AB ↬ &#8620 \u21AC \21AC
⇜ &#8668 \u21DC \21DC ⇝ &#8669 \u21DD \21DD
↚ &#8602 \u219A \219A ↛ &#8603 \u219B \219B
↮ &#8622 \u21AE \21AE ↭ &#8621 \u21AD \21AD
⇦ &#8678 \u21E6 \21E6 ⇨ &#8680 \u21E8 \21E8
⇧ &#8679 \u21E7 \21E7 ⇩ &#8681 \u21E9 \21E9
▲ &#9650 \u25B2 \25B2 ► &#9658 \u25BA \25BA
▼ &#9660 \u25BC \25BC ◄ &#9668 \u25C4 \25C4
➔ &#10132 \u2794 \2794 ➙ &#10137 \u2799 \2799
➨ &#10152 \u27A8 \27A8 ➲ &#10162 \u27B2 \27B2
➜ &#10140 \u279C \279C ➞ &#10142 \u279E \279E
➟ &#10143 \u279F \279F ➠ &#10144 \u27A0 \27A0
➤ &#10148 \u27A4 \27A4 ➥ &#10149 \u27A5 \27A5
➦ &#10150 \u27A6 \27A6 ➧ &#10151 \u27A7 \27A7
➵ &#10165 \u27B5 \27B5 ➸ &#10168 \u27B8 \27B8
➼ &#10172 \u27BC \27BC ➽ &#10173 \u27BD \27BD
➺ &#10170 \u27BA \27BA ➳ &#10163 \u27B3 \27B3
↷ &#8631 \u21B7 \21B7 ↶ &#8630 \u21B6 \21B6
↻ &#8635 \u21BB \21BB ↺ &#8634 \u21BA \21BA
↵ &#8629 \u21B5 \21B5 ↯ &#8623 \u21AF \21AF
➾ &#10174 \u27BE \27BE        

❤  基本形狀類

符號 UNICODE 符號 UNICODE
HTML JS CSS HTML JS CSS
❤ &#10084 \u2764 \2764 ✈ &#9992 \u2708 \2708
★ &#9733 \u2605 \2605 ✦ &#10022 \u2726 \2726
☀ &#9728 \u2600 \2600 ◆ &#9670 \u25C6 \25C6
◈ &#9672 \u25C8 \25C8 ▣ &#9635 \u25A3 \25A3
☻ &#9787 \u263B \263B ☺ &#9786 \u263A \263A
☹ &#9785 \u2639 \2639 ✉ &#9993 \u2709 \2709
☎ &#9742 \u260E \260E ☏ &#9743 \u260F \260F
✆ &#9990 \u2706 \2706 � &#65533 \uFFFD \FFFD
☁ &#9729 \u2601 \2601 ☂ &#9730 \u2602 \2602
❄ &#10052 \u2744 \2744 ☃ &#9731 \u2603 \2603
❈ &#10056 \u2748 \2748 ✿ &#10047 \u273F \273F
❀ &#10048 \u2740 \2740 ❁ &#10049 \u2741 \2741
☘ &#9752 \u2618 \2618 ❦ &#10086 \u2766 \2766
☕ &#9749 \u9749 \9749 ❂ &#10050 \u2742 \2742
☥ &#9765 \u2625 \2625 ☮ &#9774 \u262E \262E
☯ &#9775 \u262F \262F ☪ &#9770 \u262A \262A
☤ &#9764 \u2624 \2624 ✄ &#9988 \u2704 \2704
✂ &#9986 \u2702 \2702 ☸ &#9784 \u2638 \2638
⚓ &#9875 \u2693 \2693 ☣ &#9763 \u2623 \2623
⚠ &#9888 \u26A0 \26A0 ⚡ &#9889 \u26A1 \26A1
☢ &#9762 \u2622 \2622 ♻ &#9851 \u267B \267B
♿ &#9855 \u267F \267F ☠ &#9760 \u2620 \2620

¥  貨幣類

符號 UNICODE 符號 UNICODE
HTML JS CSS HTML JS CSS
$ &#36 \u0024 \0024 ¢ &#162 \u00A2 \00A2
£ &#163 \u00A3 \00A3 ¤ &#164 \u00A4 \00A4
€ &#8364 \u20AC \20AC ¥ &#165 \u00A5 \00A5
₱ &#8369 \u20B1 \20B1 ₹ &#8377 \u20B9 \20B9

½  數學類

符號 UNICODE 符號 UNICODE
HTML JS CSS HTML JS CSS
½ &#189 \u00BD \00BD ¼ &#188 \u00BC \00BC
¾ &#190 \u00BE \00BE ⅓ &#8531 \u2153 \2153
⅔ &#8532 \u2154 \2154 ⅛ &#8539 \u215B \215B
⅜ &#8540 \u215C \215C ⅝ &#8541 \u215D \215D
‰ &#8240 \u2030 \2030 % &#37 \u0025 \0025
< &#60 \u003C \003C > &#62 \u003E \003E

♫  音樂符號類

符號 UNICODE 符號 UNICODE
HTML JS CSS HTML JS CSS
♩ &#9833 \u2669 \2669 ♪ &#9834 \u266A \266A
♫ &#9835 \u266B \266B ♬ &#9836 \u266C \266C
♭ &#9837 \u266D \266D ♯ &#9839 \u266F \266F

✖  對錯號

符號 UNICODE 符號 UNICODE
HTML JS CSS HTML JS CSS
  &#160 \u00A0 \00A0 ☐ &#9744 \u2610 \2610
☑ &#9745 \u2611 \2611 ☒ &#9746 \u2612 \2612
✓ &#10003 \u2713 \2713 ✔ &#10004 \u2714 \2714
✕ &#10005 \u10005 \10005 ✖ &#10006 \u2716 \2716
✗ &#10007 \u2717 \2717 ✘ &#10008 \u2718 \2718

★  全都是星星

符號 UNICODE 符號 UNICODE
HTML JS CSS HTML JS CSS
★ &#9733 \u2605 \2605 ✭ &#10029 \u272D \272D
✮ &#10030 \u272E \272E ☆ &#9734 \u2606 \2606
✪ &#10026 \u272A \272A ✡ &#10017 \u2721 \2721
✯ &#10031 \u272F \272F ✵ &#10037 \u2735 \2735
✶ &#10038 \u2736 \2736 ✸ &#10040 \u2738 \2738
✹ &#10041 \u2739 \2739 ✺ &#10042 \u273A \273A
✱ &#10033 \u2731 \2731 ✲ &#10034 \u2732 \2732
✴ &#10036 \u2734 \2734 ✳ &#10035 \u2733 \2733
✻ &#10043 \u273B \273B ✽ &#10045 \u273D \273D
❋ &#10059 \u274B \274B ❆ &#10054 \u2746 \2746
❄ &#10052 \u2744 \2744 ❅ &#10053 \u2745 \2745

♒  星座類

符號 UNICODE 符號 UNICODE
HTML JS CSS HTML JS CSS
♈ &#9800 \u2648 \2648 ♉ &#9801 \u2649 \2649
♊ &#9802 \u264A \264A ♋ &#9803 \u264B \264B
♌ &#9804 \u264C \264C ♍ &#9805 \u264D \264D
♎ &#9806 \u264E \264E ♏ &#9807 \u264F \264F
♐ &#9808 \u2650 \2650 ♑ &#9809 \u2651 \2651
♒ &#9810 \u2652 \2652 ♓ &#9811 \u2653 \2653

♚  國際象棋類

符號 UNICODE 符號 UNICODE
HTML JS CSS HTML JS CSS
♚ &#9818 \u265A \265A ♛ &#9819 \u265B \265B
♜ &#9820 \u265C \265C ♝ &#9821 \u265D \265D
♞ &#9822 \u265E \265E ♟ &#9823 \u265F \265F
♔ &#9812 \u2654 \2654 ♕ &#9813 \u2655 \2655
♖ &#9814 \u2656 \2656 ♗ &#9815 \u2657 \2657
♘ &#9816 \u2658 \2658 ♙ &#9817 \u2659 \2659

♣  撲克牌類

符號 UNICODE 符號 UNICODE
HTML JS CSS HTML JS CSS
♠ &#9824 \u2660 \2660 ♣ &#9827 \u2663 \2663
♥ &#9829 \u2665 \2665 ♦ &#9830 \u2666 \2666
♤ &#9828 \u2664 \2664 ♧ &#9831 \u2667 \2667
♡ &#9825 \u2661 \2661 ♢ &#9826 \u2662 \2662

Ω  希臘字母

符號 UNICODE 符號 UNICODE
HTML JS CSS HTML JS CSS
Α &#913 \u0391 \0391 Β &#914 \u0392 \0392
Γ &#915 \u0393 \0393 Δ &#916 \u0394 \0394
Ε &#917 \u0395 \0395 Ζ &#918 \u0396 \0396
Η &#919 \u0397 \0397 Θ &#920 \u0398 \0398
Ι &#921 \u0399 \0399 Κ &#922 \u039A \039A
Λ &#923 \u039B \039B Μ &#924 \u039C \039C
Ν &#925 \u039D \039D Ξ &#926 \u039E \039E
Ο &#927 \u039F \039F Π &#928 \u03A0 \03A0
Ρ &#929 \u03A1 \03A1 Σ &#931 \u03A3 \03A3
Τ &#932 \u03A4 \03A4 Υ &#933 \u03A5 \03A5
Φ &#934 \u03A6 \03A6 Χ &#935 \u03A7 \03A7
Ψ &#936 \u03A8 \03A8 Ω &#937 \u03A9 \03A9

☩  十字

符號 UNICODE 符號 UNICODE
HTML JS CSS HTML JS CSS
☨ &#9768 \u2628 \2628 ☩ &#9769 \u2629 \2629
✝ &#10013 \u271D \271D ✞ &#10014 \u271E \271E
✟ &#10015 \u271F \271F ✠ &#10016 \u2720 \2720
✚ &#10010 \u271A \271A † &#8224 \u2020 \2020
✢ &#10018 \u2722 \2722 ✤ &#10020 \u2724 \2724
✣ &#10019 \u2723 \2723 ✥ &#10021 \u2725 \2725

©  法律符號

符號 UNICODE 符號 UNICODE
HTML JS CSS HTML JS CSS
® &#174 \u00AE \00AE © &#169 \u00A9 \00A9
℗ &#8471 \u2117 \2117 ™ &#153 \u0099 \0099
℠ &#8480 \u2120 \2120        

@  標點和符號

符號 UNICODE 符號 UNICODE
HTML JS CSS HTML JS CSS
« &#171 \u00AB \00AB » &#187 \u00BB \00BB
‹ &#139 \u008B \008B › &#155 \u009B \009B
“ &#8220 \u201C \201C ” &#8221 \u201D \201D
‘ &#8216 \u2018 \2018 ’ &#8217 \u2019 \2019
• &#8226 \u2022 \2022 ◦ &#9702 \u25E6 \25E6
¡ &#161 \u00A1 \00A1 ¿ &#191 \u00BF \00BF
℅ &#8453 \u2105 \2105 № &#8470 \u2116 \2116
& &#38 \u0026 \0026 @ &#64 \u0040 \0040
℞ &#8478 \u211E \211E ℃ &#8451 \u2103 \2103
℉ &#8457 \u2109 \2109 ° &#176 \u00B0 \00B0
| &#124 \u007C \007C ¦ &#166 \u00A6 \00A6
– &#8211 \u2013 \2013 — &#8212 \u2014 \2014
… &#8230 \u2026 \2026 &#182 \u00B6 \00B6
∼ &#8764 \u223C \223C ≠ &#8800 \u2260

2、創建的偽元素默認是在所依附的元素之上的，我們可以使用z-index:-1;把它放到下面

去

3、input、img、iframe等元素都不能包含其他元素，所以不能通過偽元素插入內容。

 

二、content屬性

::before和::after必須配合content屬性來使用，content用來定義插入的內容，content必須有值，至少是空。默認情況下，偽類元素的display是默認值inline，可以通過設置display:block來改變其顯示。

content可取以下值：

1、string

2、attr——調用當前元素的屬性

eg:

<style type="text/css">
a::after{
    content: "(" attr(href) ")";
}
</style>
<a href="http://www.cnblogs.com/starof">starof</a>

運行結果：

3、URL/URI——引用媒體文件

eg:content:url("https://www.baidu.com/img/baidu_jgylogo3.gif");

4、counter()——不使用列表元素實現序號功能

eg:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		body{
		    counter-reset: section;
		}
		h1{
		    counter-reset: subsection;
		}
		h1:before{
		    counter-increment:section;
		    content:counter(section) "、";
		}
		h2:before{
		    counter-increment:subsection;
		    content: counter(section) "." counter(subsection) "、";
		}
	</style>
</head>
<body>
	<h1>HTML tutorials</h1>
	<h2>HTML Tutorial</h2>
	<h2>XHTML Tutorial</h2>
	<h2>CSS Tutorial</h2>
 
	<h1>Scripting tutorials</h1>
	<h2>JavaScript</h2>
	<h2>VBScript</h2>
 
	<h1>XML tutorials</h1>
	<h2>XML</h2>
	<h2>XSL</h2>
</body>
</html>

　　

運行結果：

三、使用

1、清除浮動

清除浮動方法有多種，現在最常用的就是下面這種方法，僅需要以下樣式即可在元素尾部自動清除浮動

.cf::before,
.cf::after{
	content:"";
	display:table;
}
.cf::after{
	clear:both;
}
.cf{
	*zoom:1;
}

　　

2、模擬float:center的效果

float沒有center這個取值，但是可以通過偽類來模擬實現。

這個效果實現很有意思，左右通過::before float各自留出一半圖片的位置，再把圖片絕對定位上去。

<!DOCTYPE html>
<html>
<head>
    <meta charset='UTF-8'>
    <title>Float Both</title>
    <style>
    * {
        margin: 0;
        padding: 0;
    }
    body {
        font: 14px/1.8 Georgia, serif;
    }
    #page-wrap { width: 60%; margin: 40px auto; position: relative; }
    #logo { width:250px; height:250px; position: absolute; top: 0; left: 50%; margin-left: -125px; }
    #l, #r { width: 49%; }
    #l { float: left; }
    #r { float: right; }
    #l:before, #r:before { content: ""; width: 125px; height: 250px; }
    #l:before { float: right; }
    #r:before { float: left; }
    </style>
</head>
<body>
    <div id="page-wrap">
        <img src="1.jpg" id="logo">
        <div id="l">
            <p>
                Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus
            </p>
        </div>
        <div id="r">
            <p>
                Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus
            </p>
        </div>
    </div>
</body>
</html>

　　

運行結果如下：

 

3、做出各種圖形效果

舉例：一個六角星

<style>
	#star-six {
	  width: 0;
	  height: 0;
	  border-left: 50px solid transparent;
	  border-right: 50px solid transparent;
	  border-bottom: 100px solid red;
	  position: relative;
	}
	#star-six::after {
	  width: 0;
	  height: 0;
	  border-left: 50px solid transparent;
	  border-right: 50px solid transparent;
	  border-top: 100px solid red;
	  position: absolute;
	  content: "";
	  top: 30px;
	  left: -50px;
	}
</style>
<body>
	<div id="star-six"></div>
</body>

　　

運行結果：

 

4、不使用圖片創建小圖標

舉例：比如一個電話

很巧妙的應用一個div左border加圓角當機身，::before和::after配合圓角當聽筒。

<style type="text/css">
    #phone{width:50px;height:50px;border-left:6px solid #EEB422;border-radius:20%;transform:rotate(-30deg);-webkit-transform:rotate(-30deg);margin:20px;margin-right:0px;position:relative;display: inline-block;top: -5px;}
    #phone:before{width:15px;height:15px;background:#EEB422;border-radius: 20%;content: "";position: absolute;left:-2px;top: 1px;}
    #phone:after{width:15px;height:15px;background:#EEB422;border-radius: 20%;content: "";position: absolute;left:-3px;top: 34px;}
</style>
<div id="wraper">
    <div id="phone"></div>
</div>

　　

更多圖標：

<!doctype html>
<html>
<head>
    <title>偽類標簽使用</title>
</head>
<style type="text/css">
    #wraper{padding:10px;width:380px;height:380px;border:3px solid #ccc;margin:auto;}
    #power{width: 30px;height: 30px;margin:20px;border: 6px solid #EEB422;border-radius: 50%;position: relative;display: inline-block;}
    #power:before{width:7px;height:22px;background:#EEB422;position: absolute;left:8px;top:-13px;content: "";border: 3px solid #fff;}
    #play{width: 30px;height: 30px;margin:20px;border: 6px solid #EEB422;border-radius: 50%;position:relative;display: inline-block;background: #EEB422;}
    #play:before{border:11px solid transparent;border-left:17px solid #fff;content: "";position: absolute;left:9px;top: 3px;}
    #pause{width: 30px;height: 30px;margin:20px;border: 6px solid #EEB422;border-radius: 50%;position:relative;display: inline-block;background: #EEB422;}
    #pause:before{height:20px;width:5px;border:0px solid transparent;border-left:8px solid #fff;border-right:8px solid #fff;content: "";position: absolute;left:4px;top: 5px;}
    #stop{width: 30px;height: 30px;margin:20px;border: 6px solid #EEB422;border-radius: 50%;position:relative;display: inline-block;background: #EEB422;}
    #stop:before{height:17px;width:17px;background:#fff;content: "";position: absolute;left:6px;top: 6px;}
    #comment{width: 50px;height: 25px;margin:20px;border: 6px solid #EEB422;border-radius: 20%;position:relative;display: inline-block;background: #EEB422;}
    #comment:before{border:10px solid transparent;border-top:10px solid #EEB422;content: "";position: absolute;left:28px;top: 28px;}
    #comment:after{content: "....";position: absolute;color: #fff;font-size: 26px;top: -10px;left: 2px;}
    #like{width: 50px;height: 30px;margin:20px;border-radius: 55%;transform:rotate(55deg);-webkit-transform:rotate(55deg);position:relative;display: inline-block;background: #EEB422;}
    #like:before{width:50px;height:30px;border-radius: 55%;transform:rotate(-110deg);-webkit-transform:rotate(-110deg);background:#EEB422;content: "";position: absolute;left:8px;top: -12px;}
    #search{width: 20px;height: 20px;border:4px solid #EEB422;border-radius:50%;margin:20px;position:relative;display: inline-block;top: -5px;left: -5px;}
    #search:before{width:20px;height:5px;background:#EEB422;transform:rotate(45deg);-webkit-transform:rotate(45deg);content: "";position: absolute;left:15px;top: 22px;}
    #home{width: 30px;height: 30px;background:#EEB422;margin:20px;position:relative;display: inline-block;top: 5px;}
    #home:before{width:6px;height:12px;background:#fff;content: "";position: absolute;left:12px;top: 20px;}
    #home:after{border:25px solid transparent;border-bottom:20px solid #EEB422;content: "";position: absolute;top: -38px;left:-10px;}
    #photo{width:40px;height:30px;background:#EEB422;margin:20px;position:relative;display: inline-block;top: 5px;}
    #photo:before{width:13px;height:13px;border:4px solid #fff;border-radius:50%;background:#EEB422;content: "";position: absolute;left:10px;top: 5px;}
    #photo:after{width:15px;height:10px;background:#EEB422;content: "";position: absolute;top: -7px;left:13px;}
    #photo{width:40px;height:30px;background:#EEB422;margin:20px;position:relative;display: inline-block;top: 5px;}
    #email{width:50px;height:35px;background:#EEB422;margin:20px;position:relative;display: inline-block;top: 5px;}
    #email:before{border:25px solid transparent;border-top:20px solid #fff;content: "";position: absolute;left:0px;top: 2px;}
    #email:after{border:25px solid transparent;border-top:20px solid #EEB422;content: "";position: absolute;top:0px;}
    #file{width:30px;height:45px;border:4px solid #EEB422;margin:20px;position:relative;display: inline-block;top: 5px;}
    #file:before{border:10px solid #fff;border-right:10px solid #EEB422;border-bottom:10px solid #EEB422;content: "";position: absolute;left:-4px;top: -4px;}
    #file:after{width:20px;height:5px;border-top:3px solid #EEB422;border-bottom:3px solid #EEB422;content: "";position: absolute;left: 5px;top: 25px;}
    #history{width:35px;height:35px;border:4px solid #EEB422;border-radius: 50%;margin:20px;position:relative;display: inline-block;top: 5px;}
    #history:before{width:14px;height:14px;border-bottom:4px solid #EEB422;border-left:4px solid #EEB422;content: "";position: absolute;left:14px;top: 3px;}
    #video{width:50px;height:35px;background:#EEB422;border-radius: 20%;margin:20px;position:relative;display: inline-block;top: -5px;}
    #video:before{width:6px;height:6px;border:11px solid transparent;border-right:11px solid #EEB422;content: "";position: absolute;left:35px;top: 4px;}
    #video:after{width:10px;height:10px;border:6px solid transparent;border-top:6px solid #EEB422;border-left:6px solid #EEB422;transform:rotate(45deg);-webkit-transform:rotate(45deg);content: "";position: absolute;left:13px;top: 35px;}
    #tags{width:50px;height:25px;background:#EEB422;border-radius: 35% 0% 0% 35%;transform:rotate(45deg);-webkit-transform:rotate(45deg);margin:20px;margin-left:35px;position:relative;display: inline-block;top: -5px;}
    #tags:before{width:10px;height:10px;border-radius:50%;background:#fff;content: "";position: absolute;left:7px;top: 7px;}
    #phone{width:50px;height:50px;border-left:6px solid #EEB422;border-radius:20%;transform:rotate(-30deg);-webkit-transform:rotate(-30deg);margin:20px;margin-right:0px;position:relative;display: inline-block;top: -5px;}
    #phone:before{width:15px;height:15px;background:#EEB422;border-radius: 20%;content: "";position: absolute;left:-2px;top: 1px;}
    #phone:after{width:15px;height:15px;background:#EEB422;border-radius: 20%;content: "";position: absolute;left:-3px;top: 34px;}
    #profile{width: 40px;height:15px;background:#EEB422;border-radius: 45% 45% 0 0;margin:20px;position:relative;display: inline-block;top: 0px;}
    #profile:before{width: 20px;height:22px;background:#EEB422;border-radius:40%;content: "";position: absolute;left: 10px;top: -22px;}
</style>
<body>
    <div id="wraper">
        <div id="power"></div>
        <div id="play"></div>
        <div id="pause"></div>
        <div id="stop"></div>
        <div id="comment"></div>
        <div id="like"></div>
        <div id="search"></div>
        <div id="home"></div>
        <div id="photo"></div>
        <div id="email"></div>
        <div id="file"></div>
        <div id="history"></div>
        <div id="video"></div>
        <div id="tags"></div>
        <div id="phone"></div>
        <div id="profile"></div>
    </div>
</body>
</html>

　　

 

5、顯示打印網頁的URL

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<style>
@media print {
  a[href]:after {
    content: " (" attr(href) ") ";
  }
}
</style>
<body>
<a href="http://www.baidu.com">百度</a>
</body>
</html>

　　

6、給blockquote添加引號

經常用到給blockquote 引用段添加巨大的引號作為背景，可以用 ：:before 來代替 background 。好處是即可以給背景留下空間，還可以直接使用文字而非圖片：

<meta charset="utf-8"/>
<style type="text/css">
    blockquote::before {
    content: open-quote;
    color: #ddd;
    z-index: -1;
    font-size:80px;
}
</style>
<blockquote>引用一個段落,雙引號用::before偽元素實現</blockquote>

　　

7、超鏈接特效

舉例：配合 CSS定位實現一個鼠標移上去，超鏈接出現方括號的效果

<meta charset="utf-8" />
<style type="text/css">
body{
    background-color: #425a6c;
}
    a {
    position: relative;
    display: inline-block;
    outline: none;
    color: #fff;
    text-decoration: none;
    font-size: 32px;
    padding: 5px 20px;
}
a:hover::before, a:hover::after { position: absolute; }
a:hover::before { content: "\5B"; left: -10px; }
a:hover::after { content: "\5D"; right:  -10px; }
</style>
<a>鼠標移上去出現方括號</a>

　　

更多創意鏈接特效可參考： Creative Link Effects 。

8、::before和::after實現多背景圖片

舉例：一個標簽應用5張背景圖

<meta charset="utf-8" />
<style type="text/css">
#silverback {
    position: relative;
    z-index: 1;
    min-width: 200px;
    min-height: 200px;
    padding: 120px 200px 50px;
    background: #d3ff99 url(img/vines-back.png) -10% 0 repeat-x;
}
#silverback:before, #silverback:after {
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    padding-top: 100px;
}
#silverback:before {
    content: url(img/gorilla-1.png);
    padding-left: 3%;
    text-align: left;
    background: transparent url(img/vines-mid.png) 300% 0 repeat-x;
}
#silverback:after {
    content: url(img/gorilla-2.png);
    padding-right: 3%;
    text-align: right;
    background: transparent url(img/vines-front.png) 70% 0 repeat-x;
}
</style>
<div id="silverback">一個標簽應用了5張背景圖片</div>

　　

原效果來自：Multiple Backgrounds and Borders with CSS 2.1

這個效果看的真的是腦洞大開，雖然多背景圖用css3的background-image很容易就能實現。但是這篇文章是10年寫的，已經過去5年了，想想也正是他們這樣的嘗試和努力才加速了css3標准的制定，讓今天的開發更easy。今天的我們又能為5年后的開發人員做些什么貢獻呢？


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 ::before和::after偽元素的用法 ::before和::after偽元素的用法 ::before和::after偽元素的用法 偽元素::before與::after的用法 CSS偽類對象before和after的用法 關於css中after和before偽類的用法 css偽元素:before和:after用法詳解 HTML：::before和::after偽元素的用法 你所不知的 CSS ::before 和 ::after 偽元素用法 css3中before和after基本用法
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM