zoukankan      html  css  js  c++  java
  • before和after的用法

    转载: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
    HTMLJSCSSHTMLJSCSS
    &#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
    HTMLJSCSSHTMLJSCSS
    &#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
    HTMLJSCSSHTMLJSCSS
    $ &#36 u0024 024 ¢ &#162 u00A2 0A2
    £ &#163 u00A3 0A3 ¤ &#164 u00A4 0A4
    &#8364 u20AC 20AC ¥ &#165 u00A5 0A5
    &#8369 u20B1 20B1 &#8377 u20B9 20B9

    ½  数学类

    符号UNICODE符号UNICODE
    HTMLJSCSSHTMLJSCSS
    ½ &#189 u00BD 0BD ¼ &#188 u00BC 0BC
    ¾ &#190 u00BE 0BE &#8531 u2153 2153
    &#8532 u2154 2154 &#8539 u215B 215B
    &#8540 u215C 215C &#8541 u215D 215D
    &#8240 u2030 2030 % &#37 u0025 025
    < &#60 u003C 03C > &#62 u003E 03E

    ♫  音乐符号类

    符号UNICODE符号UNICODE
    HTMLJSCSSHTMLJSCSS
    &#9833 u2669 2669 &#9834 u266A 266A
    &#9835 u266B 266B &#9836 u266C 266C
    &#9837 u266D 266D &#9839 u266F 266F

    ✖  对错号

    符号UNICODE符号UNICODE
    HTMLJSCSSHTMLJSCSS
      &#160 u00A0 0A0 &#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
    HTMLJSCSSHTMLJSCSS
    &#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
    HTMLJSCSSHTMLJSCSS
    &#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
    HTMLJSCSSHTMLJSCSS
    &#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
    HTMLJSCSSHTMLJSCSS
    &#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
    HTMLJSCSSHTMLJSCSS
    Α &#913 u0391 391 Β &#914 u0392 392
    Γ &#915 u0393 393 Δ &#916 u0394 394
    Ε &#917 u0395 395 Ζ &#918 u0396 396
    Η &#919 u0397 397 Θ &#920 u0398 398
    Ι &#921 u0399 399 Κ &#922 u039A 39A
    Λ &#923 u039B 39B Μ &#924 u039C 39C
    Ν &#925 u039D 39D Ξ &#926 u039E 39E
    Ο &#927 u039F 39F Π &#928 u03A0 3A0
    Ρ &#929 u03A1 3A1 Σ &#931 u03A3 3A3
    Τ &#932 u03A4 3A4 Υ &#933 u03A5 3A5
    Φ &#934 u03A6 3A6 Χ &#935 u03A7 3A7
    Ψ &#936 u03A8 3A8 Ω &#937 u03A9 3A9

    ☩  十字

    符号UNICODE符号UNICODE
    HTMLJSCSSHTMLJSCSS
    &#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
    HTMLJSCSSHTMLJSCSS
    ® &#174 u00AE 0AE © &#169 u00A9 0A9
    &#8471 u2117 2117 &#153 u0099 099
    &#8480 u2120 2120        

    @  标点和符号

    符号UNICODE符号UNICODE
    HTMLJSCSSHTMLJSCSS
    « &#171 u00AB 0AB » &#187 u00BB 0BB
    &#139 u008B 08B &#155 u009B 09B
    &#8220 u201C 201C &#8221 u201D 201D
    &#8216 u2018 2018 &#8217 u2019 2019
    &#8226 u2022 2022 &#9702 u25E6 25E6
    ¡ &#161 u00A1 0A1 ¿ &#191 u00BF 0BF
    &#8453 u2105 2105 &#8470 u2116 2116
    & &#38 u0026 026 @ &#64 u0040 040
    &#8478 u211E 211E &#8451 u2103 2103
    &#8457 u2109 2109 ° &#176 u00B0 0B0
    | &#124 u007C 07C ¦ &#166 u00A6 0A6
    &#8211 u2013 2013 &#8212 u2014 2014
    &#8230 u2026 2026 &#182 u00B6 0B6
    &#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 {  60%; margin: 40px auto; position: relative; }
        #logo { 250px; height:250px; position: absolute; top: 0; left: 50%; margin-left: -125px; }
        #l, #r {  49%; }
        #l { float: left; }
        #r { float: right; }
        #l:before, #r:before { content: "";  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 {
    	   0;
    	  height: 0;
    	  border-left: 50px solid transparent;
    	  border-right: 50px solid transparent;
    	  border-bottom: 100px solid red;
    	  position: relative;
    	}
    	#star-six::after {
    	   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{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{15px;height:15px;background:#EEB422;border-radius: 20%;content: "";position: absolute;left:-2px;top: 1px;}
        #phone:after{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;380px;height:380px;border:3px solid #ccc;margin:auto;}
        #power{ 30px;height: 30px;margin:20px;border: 6px solid #EEB422;border-radius: 50%;position: relative;display: inline-block;}
        #power:before{7px;height:22px;background:#EEB422;position: absolute;left:8px;top:-13px;content: "";border: 3px solid #fff;}
        #play{ 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{ 30px;height: 30px;margin:20px;border: 6px solid #EEB422;border-radius: 50%;position:relative;display: inline-block;background: #EEB422;}
        #pause:before{height:20px;5px;border:0px solid transparent;border-left:8px solid #fff;border-right:8px solid #fff;content: "";position: absolute;left:4px;top: 5px;}
        #stop{ 30px;height: 30px;margin:20px;border: 6px solid #EEB422;border-radius: 50%;position:relative;display: inline-block;background: #EEB422;}
        #stop:before{height:17px;17px;background:#fff;content: "";position: absolute;left:6px;top: 6px;}
        #comment{ 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{ 50px;height: 30px;margin:20px;border-radius: 55%;transform:rotate(55deg);-webkit-transform:rotate(55deg);position:relative;display: inline-block;background: #EEB422;}
        #like:before{50px;height:30px;border-radius: 55%;transform:rotate(-110deg);-webkit-transform:rotate(-110deg);background:#EEB422;content: "";position: absolute;left:8px;top: -12px;}
        #search{ 20px;height: 20px;border:4px solid #EEB422;border-radius:50%;margin:20px;position:relative;display: inline-block;top: -5px;left: -5px;}
        #search:before{20px;height:5px;background:#EEB422;transform:rotate(45deg);-webkit-transform:rotate(45deg);content: "";position: absolute;left:15px;top: 22px;}
        #home{ 30px;height: 30px;background:#EEB422;margin:20px;position:relative;display: inline-block;top: 5px;}
        #home:before{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{40px;height:30px;background:#EEB422;margin:20px;position:relative;display: inline-block;top: 5px;}
        #photo:before{13px;height:13px;border:4px solid #fff;border-radius:50%;background:#EEB422;content: "";position: absolute;left:10px;top: 5px;}
        #photo:after{15px;height:10px;background:#EEB422;content: "";position: absolute;top: -7px;left:13px;}
        #photo{40px;height:30px;background:#EEB422;margin:20px;position:relative;display: inline-block;top: 5px;}
        #email{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{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{20px;height:5px;border-top:3px solid #EEB422;border-bottom:3px solid #EEB422;content: "";position: absolute;left: 5px;top: 25px;}
        #history{35px;height:35px;border:4px solid #EEB422;border-radius: 50%;margin:20px;position:relative;display: inline-block;top: 5px;}
        #history:before{14px;height:14px;border-bottom:4px solid #EEB422;border-left:4px solid #EEB422;content: "";position: absolute;left:14px;top: 3px;}
        #video{50px;height:35px;background:#EEB422;border-radius: 20%;margin:20px;position:relative;display: inline-block;top: -5px;}
        #video:before{6px;height:6px;border:11px solid transparent;border-right:11px solid #EEB422;content: "";position: absolute;left:35px;top: 4px;}
        #video:after{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{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{10px;height:10px;border-radius:50%;background:#fff;content: "";position: absolute;left:7px;top: 7px;}
        #phone{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{15px;height:15px;background:#EEB422;border-radius: 20%;content: "";position: absolute;left:-2px;top: 1px;}
        #phone:after{15px;height:15px;background:#EEB422;border-radius: 20%;content: "";position: absolute;left:-3px;top: 34px;}
        #profile{ 40px;height:15px;background:#EEB422;border-radius: 45% 45% 0 0;margin:20px;position:relative;display: inline-block;top: 0px;}
        #profile:before{ 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- 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年后的开发人员做些什么贡献呢?

  • 相关阅读:
    解析HTTP协议六种请求方法
    金蝶
    普元
    中间件
    [CTSC2008] 网络管理
    【Uva 10498】满意值
    【SPOJ839】最优标号
    bzoj2879 [Noi2012]美食节
    bzoj3144 [Hnoi2013]切糕
    bzoj3112 [Zjoi2013]防守战线
  • 原文地址:https://www.cnblogs.com/shixm/p/14056591.html
Copyright © 2011-2022 走看看