CSS:: Before and:: After pseudo element alternative usage

Original address: http://justcoding.iteye.com/blog/2032627

CSS has two not commonly used pseudo-classes: Before and: After, occasionally used by people to add some custom format what, but they are not only the function of this. A few days ago , I found creative link effects, a very interesting page that introduces creative linking effects, and the amazing effect of using a lot of features in addition to transform properties to deform, is the next two pseudo-elements to be introduced.

a basic syntax


Before you get to the Advanced app, check out the syntax rules. When you simply use these pseudo-elements to add some custom characters, you only need the single colon notation used by the pseudo-class to ensure browser compatibility:

P:before {}

However, in CSS3, in order to distinguish between pseudo-elements and pseudo-classes using double colons for pseudo-elements, it is recommended to write as standard double if the display or width properties are used so that the show is detached from the original element. Too old browsers may have support problems, but most of the pseudo-elements are used with CSS3, it doesn't matter backwards compatibility:
Img::after {}

These two pseudo-classes have properties that are specific to content, which is used in CSS rendering to add to the head or tail of the element's logic. Note that these additions do not change the contents of the document, do not appear in the DOM, are not duplicated, and are only added to the CSS render layer. The more useful are the following values:

[string] – Use quotation marks to include a string that will be added to the element content. Example:

A:after {content: "";}

attr () – invokes the attributes of the current element, such as displaying the ALT hint text of the picture or the Href address of the link. Example:

A:after {content: "(" attr (HREF) ")";}

URL ()/ uri () – Used to reference a media file. Example:

H1::before {content:url (logo.png);}

counter () – The counter is called, and the ordinal function can be implemented without using list elements. See the use of the Counter-increment and Counter-reset properties for details. Example:

H2:before {counter-increment:chapter; Content: "chapter" Counter (Chapter) "."}

Second Step technique


Clear float is a frequently encountered problem, many people's solution is to add an empty div application clear:both; Property. Now, without adding meaningless elements, you can automatically clear floats at the end of the element with only the following styles:
. clear-fix {*overflow:hidden; *zoom:1;}
. clear-fix:after {display:table; content: ""; width:0; Clear:both; }

Many people like to add huge quotes to the BLOCKQUOTE reference segment as a backdrop, so we can use: before instead of background, which can leave space for the background and use text instead of pictures:
Blockquote::before {
Content:open-quote;
Position:absolute;
Z-index:-1;
Color: #DDD;
font-size:120px;
Font-family:serif;
Font-weight:bolder;
}

Three effects Magical

In addition to simple add characters, with CSS powerful positioning and special effects features, can be achieved to simple elements additional up to two containers of effect. It is important to note that if you do not want content to work only with style attributes, the content property cannot be empty, that is, contents: "". Otherwise, the other style properties will not take effect.

Mouse over the link, square brackets appear: The code is as follows:

CSS section: a {        /*border:1px solid red;*/        position:relative;        left:100px;        Display:inline-block;        Outline:none;        Text-decoration:none;        Color: #000;        font-size:32px;        padding:5px 10px;} /* Initial state of the left and right square brackets */a::before {content: "\5b"; left:0px;-webkit-transition:all 1s linear;opacity:0}a::after {content: "\5d" ; Right:0px;-webkit-transition:all 1s linear;opacity:0}/* position the brackets in the join */    A::before, A::after {position:relative;}    /* Add opening brackets to the contents of the a tag when hovering over mouse hover *    /a:hover::before {content: "\5b"; left: -20px;-webkit-transition:all 1s linear; opacity:1}/* the contents of a tag with the right bracket *    /a:hover::after {content: "\5d" in the mouse hover); OK:  -20px;-webkit-transition:all 1s Linear opacity:1}html part:<body>     <a>A</a></body>

Similarly, we only need to cooperate with Display:block and Position:absolute, it can be used as two containers, combined with the suspension of the two-sided frame effect:

<!--when the mouse hovers, a label content will appear size two boxes-->*/--code as follows:

CSS section:   *<!--When the mouse hovers, a label content will appear size two boxes-->*/    a {        position:relative;        left:100px;        Display:inline-block;        Outline:none;        Text-decoration:none;        Color: #000;        font-size:32px;        padding:0 10px;    }    /* Add a box to the contents of the a tag when hovering over the mouse cursor *    /A:hover::before, A:hover::after {content        : "";        Display:block;        Position:absolute;        Top: -15%;        Left: -14%;        width:120%;        height:120%;        Border-style:solid;        border-width:4px;        border-color:red;    } /* Add a small box to the contents of the a tag while hovering over the mouse hover, or adjust the position and size of after this added box */    a:hover::after {        top:0%;        left:0%;        width:100%;        height:100%;        border-width:2px;        Border-color:blue;    } HTML section:<body>     <a>A</a></body>

　　

CSS:: Before and:: After pseudo element alternative usage