Training

• Home
• Training Classes

"Winners make choices,
losers make excuses."
Decide to be a Winner!!!!

± Getting Started

± Phase 1
Planning

± Website Tools

± Phase 3
Conceptual Design

± Helpful Information

± Phase 4
Physical Design

± Phase 5
Testing

± Phase 6
Implement and Market Website

± Other Web Development Items

± Multimedia

± Useful Utilities

± Programming

± Advanced Programming

± Microsoft Office Products

± Computer Maintenance

± Other

NOTE: This is a collection of information and links collected over the years that might provide useful information. A Safer Company LLC does not guarantee, endorse or approve any of these links or their scripts. Use these links to other websites at your own risk.

CSS Content Property

The content property is used with the :before and :after pseudo-elements, to insert generated content to a web page. Generated content does not alter the document, only the presentation.

Pseudo elements can be absolutely position relative to their parent element. You can think of them as two extra layers to play with for every element.

Use the display property to control the type of box that’s generated for the content.

Note: IE8 supports the content property only if a !DOCTYPE is specified.

Syntax

em:before { content: url("ding.wav") }

content: { { string | uri | counter | attr(identifier) | open-quote | close-quote | no-open-quote | no-close-quote } | normal | none | inherit } ;

• Special Characters

Browser Support

• Internet Explorer 8+ full support
• Firefox
  • 1.0 - 2.0 partial
  • 3.0+ full
• Safari 1.3 partial
• Opera 9.2 partial
• Chrome 2.0 partial

Examples

String

Sets the content to the text you specify.

p:before {
    content:"This is important --> ";
    color: red;
}

None or Normal

Sets the content, if specified, to nothing.

p:before {
    content:"This is important --> ";
    color: red;
}

p#test:before{ 
   content:none;  /*can use either none or normal */
}
 

Counter

Sets the content as a counter.

counter-reset - Resets the counter.

 p {
  counter-increment: mycounter;
 }
 
 p:before {
		content: counter(mycounter) ": ";
		color: red;
		font-size:1.25em;
 }
 

attr(attribute)

Sets the content as one of the selector's attribute:

The following example inserts the URL in parenthesis after each link:

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

a:before {
	content: attr(title) ": ";
  }

open-quote and close-quote / no-open-quote and no-close-quote

Sets the content to be an opening or closing quote or no opening or closing quote.

Note: You cannot have "close-quote" without "open-quote".

p:before {
	content:open-quote;
}
p:after {
	content:close-quote;
 }
p.noquote:before{
	content:no-open-quote;
}
p.noquote:after{
	content:no-close-quote;
}

url(url)

Sets the content to be some kind of media (an image, a sound, a video, etc.)

p:before {
	content:url(star.png);
}

inherit

Specifies that the value of the content property should be inherited from the parent element

Special Characters

To get the special character for content, figure out the ASCII number is for the symbol .

For example: the copyright © symbol is &#169. The ASCII number is 169. Use that number in the Entity Conversion Calculator to convert for CSS.

	.special:before, .special:after {
        font-family: "Some cool font with glyphs", serif;
        content: "\2713";  /* this is a check */
        color: #c83f3f;
        }

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

Quotation Marks for Blockquote

Format paragraphs within a blockquote with quotation marks.

blockquote p {
  margin: 0;
  text-indent: 1em;
  quotes: "\201c" "\201d";
}
blockquote p:first-of-type {
  text-indent: 0;
}
blockquote p:before {
  content: open-quote;
  font-size:2em;
}
blockquote p:after {
  content: no-close-quote;
  font-size:2em;
}
blockquote p:last-of-type::after {
  content: close-quote;
}

Chapters

These style rules add the word “Chapter” and a chapter number before every h1 heading, and prefix every h2 heading with the chapter number and a section number:

body {
   counter-reset: chapter;
} 
h1 {
    counter-increment: chapter;
    counter-reset: section;  
}  
h2 {
    counter-increment: section;
}  
h1:before {
    content: "Chapter " 
    counter(chapter) ": ";  
}  
    h2:before {
    content: counter(chapter) "."
    counter(section) " ";
}

Inserting Text before ID

This style rule inserts the text “You are here:” before the element with the ID "breadcrumbs":

#example_text_before:before {    
	content: "You are here:";
	margin-right: 0.5em; 
}

Creating Multiple Borders

#box {
   background-color: #ccc;
   border: 4px solid black;
   position: relative;
   width: 400px;
   height: 200px;
   margin: 60px auto;
   padding: 5px;
   }
#box:before {
   border: 4px solid green;
   content: 'before has a green border';
   color: green;
   position: absolute;
   width: 115%;
   height: 115%;
   top: -7.5%;
   left: -7.5%;
   padding: 5px;
   }
#box:after {
   border: 4px solid purple;
   content: 'after has a purple border';
   color: purple;
   position: absolute;
   width: 130%;
   height: 130%;
   left: -15%; 
   top: -15%;
   padding: 5px;
   }

Creating Full Browser Width Bars

/*****/
  h5 { 
  background: black;
  color: white;
  padding: 15px 0;
  position: relative; /*critical so :before and :after can be position: absolute*/
  }
  /*This makes the h5 start at absolute position 0 for 100%*/
  h5:before, h5:after {
  content: "";
  position: absolute;
  top: 0px;
  bottom: 0px; /*Make negative number to have it go below the normal*/
  width: 100%;
  }
  /*h5:before flows past the left edge*/
  h5:before {
  right: 100%; /*  From right edge of parent, goes 100% left. Sets the right edge position in % of containing element. Negative values are allowed */
  background-color: aqua;
  /*border: solid gray 2px;/*testing*/
  }
  /*h5:after flows past the right edge*/
  h5:after {
  left: 100%;/*  From left edge of parent, goes 100% across. Sets the right edge position in % of containing element. Negative values are allowed */
  background-color: yellow;
  }
  /*This keeps the left h5 from going all the way to the right*/
  .left_only:after {
  display: none;
  }
  
  /*This is the left side that sticks out before the container*/
  .right_only:before {
  width: 10%;
  width: 20px;
  background-color: pink;
  /*border: 10px solid black;/*testing*/
  }

/*Selects every <h5> element that is the first <p> element of its parent*/
  h5:nth-of-type(1), h5:nth-of-type(1):before, h5:nth-of-type(1):after {
  background-color: #dc4916; /*orange-red color*/
  }
  h5:nth-of-type(2), h5:nth-of-type(2):before, h5:nth-of-type(2):after {
  background-color: #6871b1; /*blue purple*/
  }
  h5:nth-of-type(3), h5:nth-of-type(3):before, h5:nth-of-type(3):after {
  background-color: #d1b935; /*gold*/
  }
  h5:nth-of-type(4), h5:nth-of-type(4):before, h5:nth-of-type(4):after {
  background-color: #690; /*green*/
  }

h5 extending to the left

Paragraph under h5.

h5 extending to the left

Paragraph under h5.

h5 extending to the right

Paragraph under h5.

h5 extending to the right

Paragraph under h5.

h5 extending to the left

Paragraph under h5.

Box appears under link when moused over

Mouse over the following links and a box will appear under the link. The word come from the title attirbute.

Printing url

@media print {
  a[href]:after {
    content: " (" attr(href) ") ";
  }
}

Clear Float

.group:before,
.group:after {
    content:"";
    display:table;
}
.group:after {
    clear:both;
}
.group {
    zoom:1; /* For IE 6/7 (trigger hasLayout) */
} 

Quotes

.example_quote:after {
    content: "";
    position: absolute;
    top: 100%;
    right: 25px;
    border-width: 30px 30px 0 0;
    border-style: solid;
    border-color: #245991 transparent;
}

Shows Type of Linked File

#example_link2 a[href$='.doc']:after { content: " (MS Word)"; }
#example_link2 a[href$='.xls']:after { content: " (Excel)"; }
#example_link2 a[href$='.pdf']:after { 
	padding:0px 3px; 
	content: " (PDF)" url(/images/sitemap/pdf.gif);
} 
#example_link2 a[href^='http://']:after { content: " (external)"url(/images/sitemap/new_window_icon.png); }

top of page

Page last updated: February 19, 2014 22:47 PM