◈ Estelle Weyl

◈ @estellevw

◈ www.standardista.com

1. Selectors
2. Specificity
3. Generated Content
4. Media Queries
5. Debugging
6. Colors & Transparency
7. Fonts / Typography

p:before {
  content: "before content - ";
  font-weight: bold;
}	
p:after{
  content: " - after content";
  font-weight: bold;
}

<p>the content</p>

the content

<p>
    <before>before content - </before>
        the content
    <after> - after content</after>
</p>

 element:before {
 	content: "REQUIRED";
 } 
 

• Chrome
• Safari
• Firefox
• Opera
• IE 8

 element:before {
    content: '';                  /* empty */
    content: " (.pdf) ";          /* any text */
    content: "\2603";             /* unicode */
    content: " (" attr(href) ")"; /* attributes */
    content: counter(name); 
        counter-increment: name;  /* counters */
 } 
 

 element:before {
 	content: "\2603";
 } 
 

Try it out
CopyPasteCharacter.com

<blockquote>
  <p>With generated content you can create text effects.</p>
  <p>We'll cover other uses next.</p>
</blockquote>

blockquote p:before, 
blockquote p:after {
  font-size: 2em;
  color: #C7573A;
  line-height: 0;
  vertical-align: middle; 
}
blockquote p:first-child:before {
  content: "\275D"; 
  margin: 0 5px 0 -40px;
}
blockquote p:last-child:after {
  content: "\275E";
  margin: 0 -40px 0 5px;
}

With generated content you can created text effects.

We'll cover other uses next.

This is a quote ✍

This is a thought bubble ✍

.quote:after {
  position:absolute;
  content: '';
  width: 0; height:0;
  border: 20px solid tran…
  border-top-color: red;
  bottom:-39px; left:20px;
}

.thought,.thought:before,
.thought:after  {
  border-radius: 50%;
  border: 5px solid blue;
  background-color: white;
  position:relative;
}

.thought:before, 
.thought:after {
  content: '';
  position:absolute;
  left: 20%; bottom: -30px;
  height: 40px; width: 40px; 
}
.thought:after {
  left: 12%; bottom: -50px; 
  height: 20px; width: 20px;
}

In this section you have learned the general idea of using generated content to create effects and / or to provide additional information. Try hovering over me to find out how awesome generated content can be.

Open up a text editor and try creating a tooltip without looking at the code. But, if you must, the code is attached, or you can check out your web inspector.

Here is one solution