Skip navigation

Tag Archives: css

You can add content to a web page using css !!!

Using content property in combination with :before and :after pseudo-elements, you can add content to any element. Of course Opera support this with all elements (without pseudo). IE6, IE7 not supports this property.

/* CSS */
#box:before {
content: "This text is before the box";
#box:after {
content: "This text is after the box";

<!-- HTML -->
<div id="box">I'm inside box</div>
  • Though it is not advisable to generate content using css because css is for presentation, rather use JavaScript for that.
  • You can’t use html inside content; only text.

Note: I posted here because it surprises ME to know css can generate content. My fellow UI friends may aware about this.


Unless understood css position, it will make UI designers mad. Here are few points to remember.

  1. The static value is only used for overriding a previously set value. (Most cases)
  2. Elements with position:relative are positioned relative to themselves.
  3. A relatively positioned element remains in the document flow
  4. A relatively positioned element counts as positioned, even if we don’t shift it a single pixel in any direction
  5. What people normally mean by positioning, CSS-P or layers, is elements with position:absolute.
  6. Ironically, absolute positioning is relative. An absolutely positioned element is positioned relative to another element, called the containing block.
  7. The containing block of an absolutely positioned element is its nearest positioned ancestor
  8. Absolutely positioned elements are completely removed from the document flow.

Some useful articles

A CSS sprite combines multiple background images into a single image. Spriting makes web pages faster because it reduces the number of HTTP requests required to load a web page.

Other sprite tools (like CSS Sprite Generator and CSS Sprites generator) are useful for combining multiple background images into a single sprite image.

How much does SpriteMe help reduce HTTP requests? The savings for the Alexa U.S. Top 100 shows SpriteMe replaces 9 background images with 1 sprite on average, for an overall reduction of 8 HTTP requests per page.

SpriteMe is an open source project, with all the usual links: Code, Group, Bugs, and Contact.