Artist Alexa Meade paints on people to make them look like paintings of people. She's developed a style that flattens 3 dimensional objects into what at first appears to be a 2D image. See more at https://alexameade.com

Perez, Patti, 1967- author

Online Resource

Bengaluru's celebs wish the newly-weds.

Wednesday was a day of midweek celebrations!

Karan Johar's Kalank may have tanked at the box office but it was a winner at the 12th Mirchi Music Awards, where it won the top awards.

Barker Library - QB545.17 C392 2019

“The lowering of charges or return on equity has its implications. We are fiddling around what a regulated regime is and what equity holders expect when they have invested,” said a senior government official, who did not wish to be identified.

IEEE Computer Society

Online Resource

According to Congress sources, in the series of Rahul Gandhi's talks with experts, the will be a conversation with German virologist and several personalities from other fields on Covid-19

For children and young adults with certain relapsed B-cell acute lymphoblastic leukemia (B-ALL), the immunotherapy drug blinatumomab is superior to standard chemotherapy, an NCI-sponsored Children’s Oncology Group trial shows.

What do we know about humanity-ending catastrophes? Julia Rosen talks with Sarah Crespi about various doomsday scenarios and what science can do to save us. Alex Kacelnik talks about getting ducklings to recognize “same” and “different”—a striking finding that reveals conceptual thinking in very early life.  Read the related research. [Image: Antone Martinho/Music: Jeffrey Cook]

This week we hear stories on a big jump in U.S. rates of knee arthritis, some science hits and misses from past eclipses, and the link between a recently discovered thousand-year-old Viking fortress and your Bluetooth earbuds with Online News Editor David Grimm. Sarah Crespi talks to Daniel Apai about a long-term study of brown dwarfs and what patterns in the atmospheres of these not-quite-stars, not-quite-planets can tell us. Listen to previous podcasts. [Image: NASA/JPL-Caltech; Music: Jeffrey Cook]  

Achcar, Gilbert, author

The building constructed in 1980, was tagged in the C-2 category of dangerous buildings.

The five-storey building, owned by the BMC had collapsed early morning on Friday.

61 people were killed and 31 injured after a residential building collapsed in Mumbai last week.

Shinde said his Ministry has sought a report from the JandK govt on the possible lapses.

The roof near the entrance of a pit inside Basanti Mata coal mine caved in on Monday morning.

Mud walls of building may have been weakened by the recent downpour in the city, officials said.

Three Sikh men and a woman are convicted of carrying out a revenge attack on Lt Gen Brar.

Chilton, Bruce

This is a remix of another author’s idea of using CSS to make a classic model of our solar system. Here, I’ve relied on CSS pseudo-elements and generated content to render scale models of the solar system from simple markup of the raw information.

There are three demos for this experiment, which is based on Alex Giron’s original Our Solar System in CSS3.

• Basic demo: Reworking of original experiment
• Advanced demo: Scale model of the Solar System
• Advanced demo (keyboard support): Scale model of the Solar System

The basic demo uses only CSS and simple, semantic HTML to relatively faithfully reproduce Alex’s original result.

The advanced demo is a rough scale model of the Solar System. It uses the same HTML as the “basic demo” but makes extensive use of CSS pseudo-elements, generated content, and various bits of CSS3.

The advanced demo (keyboard support) is an attempt to provide keyboard support by introducing slight modifications to the HTML. I’ve commented out the animations in this version of the demo.

Why rework the original experiment?

I was curious to see if the same result could be achieved with simpler HTML, by relying on some newer CSS features.

I experimented a bit further with generated content, shadows, and the way the layout of the solar system is implemented. Doing this exposed me to some of the different ways modern browsers are implementing CSS3. I’ve described some of those differences and bugs below.

A scale model of the solar system

The main demo is a scale model of the solar system. It uses 3 different scales: one for the object diameters; one for the distance of the planets from the sun; and one for the orbital period of each planet.

Semantic HTML and Microdata

The HTML is a list where each list item contains a title and description. I’ve included some HTML Microdata to provide hooks for generated content.

<li id="earth" itemscope>
  <h2 itemprop="object">Earth
  <dl>
    <dt>Description</dt>
    <dd itemprop="description">Earth is an ocean planet. Our home world's abundance of water - and life - makes it unique in our solar system. Other planets, plus a few moons, have ice, atmospheres, seasons and even weather, but only on Earth does the whole complicated mix come together in a way that encourages life - and lots of it.</dd>
    <dt>Diameter</dt>
    <dd itemprop="diameter">12,755 <abbr title="kilometers">km</abbr></dd>
    <dt>Distance from sun</dt>
    <dd itemprop="distance">150×10<sup>6</sup> <abbr title="kilometers">km</abbr></dd>
    <dt>Orbital period</dt>
    <dd itemprop="orbit">365<abbr title="days">d</abbr></dd>
  </dl>
</li>

CSS pseudo-elements and generated content

Pseudo-elements are used to produce the planets, Saturn’s ring, the planet names, and to add the scale information.

Given that the scales only make sense when CSS is loaded it isn’t appropriate to have the scales described in the HTML. Both demos use the same HTML but only one of them is a rough scale model. Therefore, in the scale model demo I’ve used generated content to present the ratios and append extra information to the headings.

header h1:after {content:": A scale model";}
header h2:after {content:"Planet diameters 1px : 1,220 km / Distance from sun 1px : 7,125,000 km / Orbital period 1s : 4d";}

#earth dd[itemprop=diameter]:after {content:" (5px) / ";}
#earth dd[itemprop=distance]:after {content:" (22px) / ";}
#earth dd[itemprop=orbit]:after {content:" (91s)";}

Even more complex 3D presentations are likely to be possible using webkit-perspective and other 3D transforms.

Keyboard support

With a little modification it is possible to provide some form of keyboard support so that the additional information and highlighting can be viewed without using a mouse. Doing so requires adding block-level anchors (allowed in HTML5) and modifying some of the CSS selectors.

Modern browser CSS3 inconsistencies

This experiment only works adequately in modern browsers such as Safari 4+, Chrome 4+, Firefox 3.6+ and Opera 10.5+.

Even among the current crop of modern browsers, there are bugs and varying levels of support for different CSS properties and values. In particular, webkit’s box-shadow implementation has issues.

There are a few other unusual :hover bugs in Opera 10.5 (most obvious in the basic demo). It should also be noted that the :hover area remains square in all modern browsers even when you apply a border-radius to the element.

Border radius

There are also a few other peculiarities around percentage units for border radius. Of the modern browsers, a square object with a border-radius of 50% will only produce a circle in Safari 5, Chrome 5, and Firefox 3.6.

Safari 4 doesn’t appear to support percentage units for border radius at all (which is why the CSS in the demos explicitly sets a -webkit-border-radius value for each object). Safari 5 and Chrome 5 do support percentage units for this property. However, Chrome 5 has difficulty rendering a 1px wide border on a large circle. Most of the border simply isn’t rendered.

In Opera 10.5, if you set border-radius to 50% you don’t always get a circle, so I have had to redeclare the border-radius for each object in pixel units.

It appears that this is one aspect of Opera’s non-prefixed border-radius implementation that is incorrect and in need of fixing.

Box shadow

Safari 4’s inferior box-shadow implementation means that inset shadows are not rendered on the planet bodies. In addition, the second box-shadow applied to Saturn (used to separate the planet from its ring) is completely missing in Safari 4 as it does not support a spread radius value.

Safari 5 and Chrome 5 are better but still problematic. The second box-shadow is not perfectly round as the box-shadow seems to use the pseudo-element’s computed border-radius. Furthermore, Chrome 5 on Windows does not properly support inset box-shadow meaning that the shadow ignores the border-radius declaration and appears as a protruding square.

The use of box-shadow to separate Saturn from the ring isn’t strictly necessary. You can create the separated ring using a border but box-shadow cannot be applied in a way that casts it over a border. Another alternative would be to add a black border around the planet to give the illusion of space between itself and the ring, but all browsers display a few pixels of unwanted background colour all along the outer edge of the rounded border.

I wanted the ring to share the appearance of a shadow being cast on it. Opera 10.5 and Firefox 3.6 get it right. Both webkit browsers get it wrong.

CSS is a versatile style language that is most frequently used to control the look and formatting of an HTML document based on information in the document tree. But there are some common publishing effects – such as formatting the first line of a paragraph – that would not be possible if you were only able to style elements based on this information. Fortunately, CSS has pseudo-elements and pseudo-classes.

As their names imply, they are not part of the DOM in the way that ‘real’ HTML elements and classes are. Instead, they are CSS abstractions that provide additional, and otherwise inaccessible, information about the document.

This article will discuss the CSS pseudo-elements that are part of CSS 2.1 – :first-letter, :first-line, :before, and :after – and how the :before and :after pseudo-elements can be exploited to create some interesting effects, without compromising the simplicity of your HTML. But first, let’s look at each type of pseudo-element and how to use them in their basic form.

The :first-line and :first-letter pseudo-elements

The :first-line pseudo-element lets you apply styles to the first formatted line of a block container element (i.e., elements with their display property set to block, inline-block, list-item, table-caption, or table-cell). For example:

p:first-line { font-weight: bold; }

…will change the first line of every paragraph to bold. The :first-line pseudo-element can be treated as if it were an extra HTML inline element wrapping only the first line of text in the paragraph.

The :first-letter pseudo-element lets you apply styles to the first letter (and any preceding punctuation) of the first formatted line of a block container element. No other inline content (e.g. an image) can appear before the text. For example:

p:first-letter { float: left; font-size: 200%; }

…will produce a basic ‘drop cap’ effect. The first letter of every paragraph will be floated left, and twice as large as the other letters in the paragraph. The :first-letter pseudo-element can be treated as if it were an extra HTML inline element wrapping only the first letter of text in the paragraph.

The :first-line and :first-letter pseudo-elements can only be attached to block container elements, but the first formatted line can be contained within any block-level descendant (e.g., elements with their display property set to block or list-item) in the same flow (i.e., not floated or positioned). For example, the following HTML fragment and CSS:

<div><p>An example of the first line of text being within a descendant element</p></div>

div:first-line { font-weight: bold; }

…would still result in a bold first line of text, because the paragraph’s text is the first formatted line of the div.

The :before and :after pseudo-elements

The :before and :after pseudo-elements are used to insert generated content before or after an element’s content. They can be treated as if they were extra HTML inline elements inserted just before and after the content of their associated element.

Generated content is specified using the content property which, in CSS 2.1, can only be used in conjunction with the :before and :after pseudo-elements. Furthermore, you must declare the content property in order to generate the :before and :after pseudo-elements.

The content property can take string, url(), attr(), counter() and counters() values. The url() value is used to insert an image. The attr() function returns as a string the value of the specified attribute for the associated element. The counter() and counters() functions can be used to display the value of any CSS counters.

For example, the following HTML fragment and CSS:

<a href="http://wikipedia.org">Wikipedia</a>

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

…would display the value of the href attribute after a link’s content, resulting in the following anchor text for the example above: Wikipedia (http://wikipedia.org). This can be a helpful way to display the destination of specific links in printed web documents.

Keep in mind that CSS is meant for adding presentation and not content. Therefore, the content property should be used with caution.

It’s also worth noting that the :first-letter and :first-line pseudo-elements apply to the first letter and first line of an element including any generated content inserted using the :before and :after pseudo-elements.

Browser support for pseudo-elements

The :first-letter and :first-line pseudo-elements were introduced in CSS1 and there is wide basic support for them. However, IE 6 and IE 7 have particularly buggy implementations; even modern browsers are not entirely consistent in the way that they handle the :first-line and :first-letter pseudo-elements (example bugs).

The :before and :after pseudo-elements were introduced in the CSS 2.1 specification and are fully implemented in Firefox 3.5+, IE 8+, Safari 3+, Google Chrome, and Opera. Modern versions of Firefox even support CSS transitions and animations applied to pseudo-elements. However, legacy browsers like IE 6 and IE 7 do not support the :before and :after pseudo-elements at all.

For more detailed information on pseudo-element browser support, browser bugs, and workarounds, have a look at Sitepoint’s reference and this article on IE 6/7 issues.

In most cases, the :before and :after pseudo-elements can be used as part of a ‘progressive enhancement’ approach to design and development, because IE 6 and IE 7 will simply ignore them altogether. Alternatively, Modernizr now includes a robust feature test for generated content, providing one way to specify fallbacks or enhancements depending on browser support. The important thing is to remember to check what happens in browsers where support is missing.

Alternative ways to use pseudo-elements

Let’s take a look at how the :before and :after pseudo-elements can be used as the basis for some interesting effects. Most of the time, this involves generating empty :before and :after pseudo-elements by declaring an empty string as the value of the content property. They can then be manipulated as if they were empty inline HTML elements, keeping your HTML clean and giving you full control of certain effects from within CSS style sheets.

Simple visual enhancements, like speech bubbles and folded corners, can even be created without the need for images. This relies on the fact that you can create simple shapes using CSS.

Several types of ‘CSS polygons’ can be created as a result of browsers rendering borders at an angle when they meet. This can be exploited to create triangles. For example, the following HTML fragment and CSS:

<div class="triangle"></div>

.triangle {
  width: 0;
  height: 0;
  border-width: 20px;
  border-style: solid;
  border-color: red transparent transparent;
}

…will create a downward pointing, red triangle. By varying the width, height, border-width, border-style, and border-color values you can produce different shapes and control their orientation and colour. For more information, be sure to read Jon Rogan’s summary of the technique.

The more advanced pseudo-element hacks use the extra background canvas afforded by each :before and :after pseudo-element. This can help you crop background images, control the opacity of background images, and ‘fake’ multiple backgrounds and borders in browsers without support for CSS3 multiple backgrounds (e.g., IE 8). Taken to ludicrous extremes, you can even build a whole CSS icon set. To start with, let’s look at some simple effects that can be created without images or presentational HTML.

Creating CSS speech bubbles

In this example, a quote is styled to look like a speech bubble, using CSS. This is done by creating a triangle using a pseudo-element, and then absolutely positioning it in the desired place. By adding position:relative to the CSS styles for the HTML element, you can absolutely position the :after pseudo-element relative to its associated element.

<div class="quote">[Quoted text]</div>

.quote {
  position: relative;
  width: 300px;
  padding: 15px 25px 20px;
  margin: 20px auto;
  font: italic 26px/1.4 Georgia, serif;
  color: #fff;
  background: #245991;
}

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

There’s nothing stopping you from adding some CSS3 to further enhance the effect for capable browsers. This could be adding rounded corners to the box or applying a skew transform to the triangle itself. Fiddle with the code in this example.

Creating CSS ‘ribbons’

Using the same principle, you can create a CSS ribbon effect without images or extra HTML. This time the effect uses 2 pseudo-element triangles. The HTML fragment is still very simple.

<div class="container">
    <h1>Simple CSS ribbon</h1>
    <p>[other content]</p>
</div>

You then need to use negative margins to pull the h1 outwards so that it extends over the padding and beyond the boundaries of the container div. The HTML fragment above can be styled using the following CSS:

.container {
  width: 400px;
  padding: 20px;
  margin: 20px auto;
  background: #fff;
}

.container h1 {
  position: relative;
  padding: 10px 30px;
  margin: 0 -30px 20px;
  font-size: 20px;
  line-height: 24px;
  font-weight: bold;
  color: #fff;
  background: #87A800;
}

From here, you only need to add the pseudo-element triangles to create the ‘wrapping’ appearance associated with ribbons. The :before and :after pseudo-elements share many styles, so you can simplify the code by only overriding the styles that differ between the two. In this case, the triangle created with the :after pseudo-element must appear on the opposite side of the heading, and will be a mirror image of the other triangle. So you need to override the shared styles that control its position and orientation.

.container h1:before,
.container h1:after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  border-width: 0 10px 10px 0;
  border-style: solid;
  border-color: transparent #647D01;
}

/* override shared styles */
.container h1:after {
  left: auto;
  right: 0;
  border-width: 0 0 10px 10px;
}

Fiddle with the code in this example.

Creating CSS folded corners

The final example of this form of pseudo-element hack creates a simple CSS folded-corner effect. A pseudo-element’s border properties are set to produce two differently-coloured touching triangles. One triangle is a slightly darker or lighter shade of the box’s background colour. The other triangle matches the background colour of the box’s parent (e.g. white). The pseudo-element is then positioned in the top right corner of its associated element to complete the effect.

.note {
  position: relative;
  padding: 20px;
  margin: 2em 0;
  color: #fff;
  background: #97C02F;
}

.note:before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  border-width: 0 16px 16px 0;
  border-style: solid;
  border-color: #658E15 #fff;
}

Varying the size of the borders will vary the size and angle of the folded-corner. Fiddle with the code in this example.

Pseudo background-crop

Although creating polygons with pseudo-elements can produce some popular effects without images, the possibilities are inherently limited. But this is only one type of :before and :after pseudo-element hack. Treated as extra background canvases, they can be used to fill some gaps in existing browser support for CSS features.

One of those features is the cropping of background images. In the future, it’s likely that you’ll be able to crop background images using fragment identifiers, as is proposed in the CSS Image Values Module Level 3 draft. But at the moment no browsers support the use of fragment identifiers with bitmap images. Until they do, you can make use of this CSS 2.1 hack to emulate background image cropping in modern browsers.

The principle behind a ‘pseudo background-crop‘ is to apply a background-image to a pseudo-element rather than directly to an element in the HTML document. One of the applications of this technique is to crop icons that are part of a sprite.

For example, a web app might allow users to ‘save’, ‘edit’, or ‘delete’ an item. The HTML involved might look something like this:

<ul class="actions">
  <li class="save"><a href="#">Save</a></li>
  <li class="edit"><a href="#">Edit</a></li>
  <li class="delete"><a href="#">Delete</a></li>
</ul>

To enhance the appearance of these ‘action’ links, it is common to see icons sitting alongside the anchor text. For argument’s sake, let’s say that the relevant icons are part of a sprite that is organised using a 16px × 16px grid.

The :before pseudo-element – with dimensions that match the sprite’s grid unit – can be used to crop and display each icon. The sprite is referenced as a background image and the background-position property is used to control the precise positioning of each icon to be shown.

.actions a:before {
  content: "";
  float: left;
  width: 16px;
  height: 16px;
  margin: 0 5px 0 0;
  background: url(sprite.png);
}

.save a:before { background-position: 0 0; }
.edit a:before { background-position: -16px 0; }
.delete a:before { background-position: -32px 0; }

Using pseudo-elements like this helps to avoid the need to either add liberal amounts of white space to sprites or use empty HTML elements to do the cropping. Fiddle with the code in this example.

Pseudo background-position

The CSS 2.1 specification limits the values of background-position to horizontal and vertical offsets from the top-left corner of an element. The CSS Backgrounds and Borders Module Level 3 working draft includes an improvement to the background-position property to allow offsets to be set from any side. However, Opera 11+ is currently the only browser to have implemented it.

But by using pseudo-elements, it’s possible to emulate positioning a background image from any side in any browser with adequate CSS 2.1 support –’pseudo background-position‘.

Once a pseudo-element is created, it must be absolutely positioned in front of the associated element’s background but behind its content, so as not to prevent users from being able to select text or click on links. This is done by setting a positive z-index on the element and a negative z-index on the pseudo-element.

#content {
  position: relative;
  z-index: 1;
}

#content:before {
  content: "";
  position: absolute;
  z-index: -1;
}

Now the pseudo-element can be sized and positioned to sit over any area within (or beyond) the element itself, without affecting its content. This is achieved by using any combination of values for the top, right, bottom, and left positional offsets, as well as the width, and height properties. It is the key to their flexibility.

In this example, a 200px × 300px background image is applied to the pseudo-element, which is also given dimensions that match those of the image. Since the pseudo-element is absolutely positioned, it can be offset from the bottom and right of the associated HTML element.

#content {
  position: relative;
  z-index: 1;
}

#content:before {
  content: "";
  position: absolute;
  z-index: -1;
  bottom: 10px;
  right: 10px;
  width: 200px;
  height: 300px;
  background: url(image.jpg);
}

Many other hacks and effects are possible using the :before and :after pseudo-elements, especially when combined with CSS3. Hopefully this introduction to pseudo-elements, and how they can be exploited, will have inspired you to experiment with them in your work.

The future of pseudo-elements

The way that pseudo-elements are used will continue to change as CSS does. Some new applications will emerge, and existing ones will fade away as browser implementation of ‘CSS3 modules’ continues to improve.

Generated content and pseudo-elements themselves are likely to undergo changes too. The CSS3 Generated and Replaced Content Module introduced a two-colon format for pseudo-elements (i.e., ::before) to help distinguish between pseudo-classes and pseudo-elements. But for compatibility with previous levels of CSS, pseudo-elements do not require two colons. Most modern browsers support both formats, but it is not supported by IE 8 and the single-colon format ensures greater backwards compatibility.

The proposed extensions to pseudo-elements included the addition of nested pseudo-elements (::before::before), multiple pseudo-elements (::after(2)), wrapping pseudo-elements (::outside), and the ability to insert pseudo-elements into later parts of the document (::alternate). However, the CSS3 Generated and Replaced Content Module is undergoing significant changes.

This article was originally published in .net magazine in April 2011

Related resources

• Interactive examples of the code throughout this article
• CSS generated content techniques
• Automatic numbering with CSS counters
• CSS image replacement using pseudo-elements
• Multiple backgrounds and borders with CSS 2.1
• CSS background image hacks
• A whole bunch of amazing stuff pseudo-elements can do

Online Resource

Leigh, Michael D., author

Tapsell, Ross, author

Darmstadt : Steinkopff, 2006

Hayden Library - QC174.26.W3 C65 2018

Barker Library - QC173.55.K35 2019

Hayden Library - QC173.6.C36 2019

Usually, general insurers give 30 days for health and 90 days for auto insurance policyholders to pay renewal premiums, even after the due date has passed

Thappad aspires to be Arth-worthy. Unfortunately, it doesn't make the cut, feels Rediff reader Sumeet Nadkarni.

Taapsee Pannu reveals she's been 'nerdy kid', in note about a school visit experience

Interview with Linda Brubaker, MD, author of Long-term Outcomes Following Abdominal Sacrocolpopexy for Pelvic Organ Prolapse