Compare Revisions

content

Revision 483847:

Revision 483847 by KarenScott on

Revision 483851:

Revision 483851 by KarenScott on

Title:
content
content
Slug:
Web/CSS/content
Web/CSS/content
Tags:
"CSS","NeedsLiveSample","CSS Reference","CSS Référence"
"CSS","NeedsLiveSample","CSS Reference","CSS Référence"
Content:

Revision 483847
Revision 483851
nn117    <h2 name="Formatting_a_breadcrumb_list_by_inserting_content_b
 >efore_links">
118      &nbsp;
119    </h2>
120    <h2 name="Code_sample_-_content_with_multiple_values">
121      Code sample - content with multiple values adding an icon b
 >efore a link
122    </h2>
123    <h3>
124      HTML Content
125    </h3>
126    <pre class="brush: html">
127&lt;a href="http://www.mozilla.org/en-US/"&gt;Home Page&lt;/a&gt;
128</pre>
129    <h3>
130      CSS Content
131    </h3>
132    <pre class="brush: css">
133a:before{
134    content: url(http://www.mozilla.org/favicon.ico) " MOZILLA: "
 >;
135    font:    x-small Arial,freeSans,sans-serif;
136    color:   gray;
137}
138</pre>
139    <h3>
140      Output
141    </h3>
142    <p>
143      {{ EmbedLiveSample('Code_sample_-_content_with_multiple_val
 >ues', 200, 60) }}
144    </p>
n118      Example - Insert a light bulb before an idean146      Example - Insert a light bulb after an idea
n136.brightIdea p:before{n164.brightIdea p:after{
t146    </p>t
147    <h2 id="Example_-_tag_a_domain_name_to_the_end_of_a_user_name
>_to_make_an_email_address" name="Example_-_tag_a_domain_name_to_t 
>he_end_of_a_user_name_to_make_an_email_address"> 
148      Example - tag a domain name to the end of a user name to ma
>ke an email address 
149    </h2>
150    <h3 id="HTML_Content">
151      HTML Content
152    </h3>
153    <pre class="brush: html">
154&lt;div&gt;
155    &lt;p&gt;This text contains a number of usernames such as &lt
>;span class='mailDomain'&gt;john_smith&lt;/span&gt; 
156       and &lt;span class='mailDomain'&gt;jane_brown&lt;/span&gt;
>.  The content property of the mailDomain  
157       class appends the domain name to the user name.&lt;/p&gt;
158    &lt;p&gt;This might simplify the migration of names to a new 
>domain in the future.&lt;/p&gt; 
159&lt;/div&gt;
160</pre>
161    <h3 id="CSS_Content">
162      CSS Content
163    </h3>
164    <pre class="brush: css">
165.mailDomain:after{
166    content: '@domain.com';
167    color:#a0a0a0;
168}
169</pre>
170    <h3 id="Output">
171      Output
172    </h3>
173    <p>
174      {{ EmbedLiveSample('Example_-_tag_a_domain_name_to_the_end_
>of_a_user_name_to_make_an_email_address', 800, 120) }} 

Back to History