CSS - BEFORE-AFTER CONTENT v.1

============================
======== CSS - BEFORE-AFTER CONTENT  v.1 - POSTé
============================

============================
========  Using character escapes in markup and CSS
== <a href="http://www.w3.org/International/questions/qa-escapes">Using character escapes in markup and CSS</a>

============================
========  :BEFORE and :AFTER === A Whole Bunch of Amazing Stuff Pseudo Elements Can Do - June 13, 2011
<a href="http://css-tricks.com/pseudo-element-roundup/">A Whole Bunch of Amazing Stuff Pseudo Elements Can Do</a>

- Expand the number of shapes you can make with a single element
- Clear floats
- Simulate float: center;
- Label blocks of code with the language it is in
- Create an entire icon set
- Use available space more efficiently
- Apply typographic flourishes
- Create full browser width bars
- Create a body border
- Fade out a page when a particular link is rolled over
- Style the numbers in ordered lists
- Make data tables responsive
- Create styled tooltips

============================
======== BEFORE AFTER - QUOTE - Generated quotes
==http://www.javascriptkit.com/dhtmltutors/cssgenerate4.shtml
Quotes can also be dynamically generated in CSS2 via the "quotes" property:
P.myquotes{quotes: '"' '"';}
Quotes are always specified in pairs, opening/closing quotation mark.
 In this case, I want the standard double quote (") in both cases,
 which is done by wrapping each double quote in single quote.
 Having done this, you now formally apply this quote behavior to an element:
P.myquotes:before{
content: open-quote;
}
P.myquotes:after{
content: close-quote;
}
<p class="myquotes">Life is like a box of chocolates.</p>
The result simply is (simulated): "Life is like a box of chocolates."
==4 values:
    open-quote: Inserts an opening quotation mark per the "quotes" property
    close-quote: Inserts a closing quotation mark per the "quotes" property
    no-open-quote: No opening quotation is inserted.
    no-close-quote: No closing quotation is inserted.

The "quotes" property is nifty in that it allows you to not only customize the type of quote to be shown.
" (standard quotation) 	0022
' (single quotation) 	0027
< (single left angle quotation) 	2039
> (single rght angle quotation) 	203A
« (double left angle quotation) 	00AB
» (double right angle quotation) 	00BB
` (single left quotation) 	2018
' (single right quotation) 	2019
`` (double left quotation/ curly) 	201C
'' (double right quotation/ curly) 	201D
,, (double low-9 quotation) 	201E

So for example, the below adds some bold curly quotes around the BLOCKQUOTE element:
blockquote{quotes: "\201C" "\201D";}
blockquote:before{content: open-quote; font-weight: bold;}
blockquote:after{content: close-quote; font-weight: bold;}

<blockquote>
What happens is not as important as how you react to what happens.
</blockquote>

============================
=========== CSS3 Generated and Replaced Content Module 2003
== http://www.w3.org/TR/css3-content/#reserved
4. Pseudo-elements

    4.1. Syntax
    4.2. Inserting content into an element: the '::before' and '::after' pseudo-elements
        4.2.1. Nesting '::before' and '::after' pseudo-elements
        4.2.2. Inserting multiple '::before' and '::after' pseudo-elements
    4.3. Wrapping elements in pseudo-elements with '::outside'
        4.3.1. Mixing '::outside' with '::before' and '::after'
    4.4. Inserting new content later in the document tree with '::alternate'
        4.4.1. Mixing '::alternate' with '::outside', '::before', and '::after'
    4.5. Block markers: The '::marker' pseudo-element
    4.6. Line markers: The '::line-marker' pseudo-element

5. Moving content to later in the document: the 'move-to' property
6. The 'display' property
7. Specifying quotes with the 'quotes' property

    7.1. Inserting quotes with the 'content' property

8. Automatic counters and numbering: the 'counter-increment' and 'counter-reset' properties

    8.1. Nested counters and scope
    8.2. Counter styles
    8.3. Counters in elements with 'display: none'
    8.4. Reserved Counter Names

. Named strings
10. '@counter' and '@string'

    10.1. '@counter'
    10.2. '@string'
    10.3. Determining which counter or string-set value to use: the 'page-policy' property

11. Inserting and replacing content with the 'content' property
12. Replaced content

    12.1. The 'crop' property
    12.2. Intrinsic dimensions

13. Examples

    13.1. Footnote elements
    13.2. Footnote attributes
    13.3. Styling footnotes
    13.4. Multiple styles on one element
    13.5. Section notes
    13.6. Top floats

============================
=========== BEFORE / AFTER
==FR : http://www.nanoum.net/blog/5_before_et_after.html
==http://www.css3create.com/after-before
=========== CONTENT et BEFORE / AFTER
edit:after /before CONTENT
== http://forum.userstyles.org/discussion/27655/new-table-view/p1

.edit:after
{ content: "Edit" !important;
font-size: 13px !important; }

.delete:before
{ content: "Delete" !important;
font-size: 13px !important; }

.undelete:before
{ content: "Undelete" !important;
font-size: 13px !important;
color: #444 !important; }

============================
=========== CONTENT "- Remember this";
== http://www.w3schools.com/cssref/sel_after.asp
==content:"- Remember this"
==content:url(images/light_bulb__exclamation.png)
Insert content after every <p> element, and style the inserted content:
p:after
{
content:"- Remember this";
background-color:yellow;
color:red;
font-weight:bold;
}
==EXEMPLE PERSO (Flickr) :
FAIT avec cette page : http://www.flickr.com/photos/23329110@N08/5300550483/
#gallery-count:after {
content:"- Remember this";
background-color:yellow;
color:red;
font-weight:bold;
}

============================
=========== CONTENT:attr(href)
== http://www.w3schools.com/cssref/pr_gen_content.asp
== (test page Eyrolles) :  http://www.editions-eyrolles.com/css2/tests/listes/listes4.htm
The attr() property inserts a specified attribute's value before or after the selected element(s).

a:after
{
content: " (" attr(href) ")";
}


============================
=========== CONTENT : valeur
== http://www.w3schools.com/cssref/pr_gen_content.asp
== (test page Eyrolles) :  http://www.editions-eyrolles.com/css2/tests/listes/listes4.htm
Example :
none 	       - Sets the content, if specified, to nothing
normal         - Sets the content, if specified, to normal, which default is "none" (which is nothing)
counter        - Sets the content as a counter
attr(attribute)- Sets the content as one of the selector's attribute
string 	       - Sets the content to the text you specify
open-quote 	   - Sets the content to be an opening quote
close-quote    - Sets the content to be a closing quote
no-open-quote  - Removes the opening quote from the content, if specified
no-close-quote - Removes the closing quote from the content, if specified
url(url) 	   - Sets the content to be some kind of media (an image, a sound, a video, etc.)
inherit 	   - Specifies that the value of the content property should be inherited from the parent element

============================
=========== CONTENT :Astuce CUMULE DE REGLEs = [ ]
On peut cumuler les indications à afficher.
 Ainsi, si on veut qu'à l'impression il y ait aussi l'indication de langue
 comme dans le précédent exemple (entre crochets et séparées d'un tiret), on indique :
a:after {
 content: " (" attr(href) ") ";
 }

a:after {
 content: " [" attr(href) " - " attr(hreflang) "] ";
 }
 EXAMPLE PERSO - USERSTYLES FORUM COMMENTS :
 #vanilla_discussion_comment.Vanilla #Frame #Body #Content ul.DataList li.Item .Comment .Meta span.DateCreated a.Permalink:before, #vanilla_discussion_index.Vanilla #Frame #Body #Content ul.DataList li.Item .Comment .Meta span.DateCreated a.Permalink:before {
    color: #56B1E1 !important;
    content: " [" attr(name) " - " attr(class) "] " !important;
    display: inline-block !important;
    margin-right: 5px !important;
    width: auto !important;
}
/* TEST OK - - VIEWIER PAGE - ADD SITE NAME in BOOARD BOX - === */
#pin_ajax_view .pin_container .left-column .big_pin_box .pin-header .navbar-inner .pull-left a.btn[target="_blank"]:after {
position: relative !important;
display: inline-block !important;
width: auto !important;
content:" ▶  " attr(data-hostname) " "  !important;
font-size: 10px !important;
color:red !important;
}
/* OK - CONTENT COMBINED - CAM SHOW */
.btnsLeft .userInfoFromTitle:after {
position: absolute ! important;
content: " ▶  "" camshow :  "  attr(uname)! important;
    height: 10px !important;
    line-height: 10px !important;
    width: auto !important;
    top: 70px ! important;
left: -350px ! important;
    padding: 3px 10px !important;
    background-image: none !important;
background: black ! important;
    font-size: 14px !important;
    color: gold !important;
z-index: 500000 ! important;
}

 GOOD - EXAMPLE PERSO - S.COM :
/* PROFILE - USER WEBSITE - ADD TXT  - ( SITE ) - === */
#global #container .user_info_box p a:after {
    position: absolute ! important;
    display: inline-block ! important;
    margin-left: 5px ! important;
    content:   attr(href) ! important;
    content:   "( " attr(href) " ) " ! important;
}
 /* NOT GOOD - EXAMPLE PERSO (not working) - MOZ THEMES : https://addons.mozilla.org/en-US/firefox/themes/ - ==== */
.persona-preview:before {
position: relative !important;
display: inline-block !important;
content: "attr(name)" !important;
/*content:" xxx" !important;*/
color: gold !important;
font-size: 10px !important;
width: auto !important;
}

============================
=========== CONTENT TRICK : Mark your visited links with checkmarks:
==http://css-tricks.com/css-content/
#main-content a:visited:before {
   content:  "\2713 ";
}

============================
=========== CONTENT : Special Characters
==http://css-tricks.com/css-content/
Here's some random useful ones:

\2018 - Left Single Smart Quote
\2019 - Right Single Smart Quote
\00A9 - Copyright
\2713 - Checkmark
\2192 - Right arrow
\2190 - Left arrow


============================
=========== CLEAR with :after
==http://net.tutsplus.com/tutorials/html-css-techniques/the-30-css-selectors-you-must-memorize/
The before and after pseudo classes
They simply generate content around the selected element.
    .clearfix:after {
        content: "";
        display: block;
        clear: both;
        visibility: hidden;
        font-size: 0;
        height: 0;
        }

    .clearfix {
       *display: inline-block;
       _height: 1%;
    }

This hack uses the :after pseudo class to append a space after the element, and then clear it.
 It's an excellent trick to have in your tool bag, particularly in the cases when the overflow: hidden; method isn't possible.

For another creative use of this, refer to my quick tip on creating shadows.