How to generate content with CSS

[Eshita The Techie]

I have tried many times to generate the content with CSS in Internet Explorer 7, but I was not successful. I think that it must be causing because I am not having much idea about generating the content. So please tell me how to generate content with CSS? I am sure that there would be someone who knows about this issue. Since, I am not having much idea about it, I am requesting to explain me in details, if possible with sample of coding (so that I can understand that easily). Really would be grateful to you all..

[Gefry]

It is quite possible to generate content in CSS, using the pseudo-elements :before and :after and property content. This feature is not implemented by Internet Explorer to version 7. Therefore, what follows concerns only version 8 of IE and Firefox, Opera, Safari, or any other browser that implements the pseudo-elements :before and :after, and the property content. So I think that you are not able to generate the content because of the older version. You will have to first update it to newer version and then try again. I am sure that will help you.

[Benito]

A practical example is to display the value of an HTML attribute, such as attribute hreflang element a , which can report that the link leads to a page in a different language from that used by the page containing the link. In other words, consider the following HTML snippet:

<p> Text with a link to a page in a foreign language
 as <a href="http://forums.techarena.in" hreflang="en"> homepage TechArena </a>.</p>

For this, we use the attribute selector (to verify that the item a indeed contains an attribute hreflang), the pseudo-element :after (to generate content after the selected item) and for the value property content , function, CSS attr() which returns, as a string, the attribute value specified in its parameter. This, in CSS, gives the following rule:

a [hreflang]: after {
content: "\ 0000a0 (" attr (hreflang )")";
}

[Shutdown]

a [hreflang]: after {
content: "\ 0000a0 (" attr (hreflang )")";
}

The function attr() is surrounded on both sides, by a string, delimited by quotation marks (which may be single or double). The first string has a six-digit hexadecimal code, preceded by a backslash: it is a way to encode special characters, such as non-breaking space in this case, according to ISO 10646. The above rule will therefore add to the link text non-breaking space followed by an open parenthesis, the string en (the value of the attribute hreflang ) and a right parenthesis or "(in)". We could very well not verify that the item a desired has the attribute. But as a rule do not use CSS attribute selector, as follows:

a: after {
content: "\ 0000a0 (" attr (hreflang )")";
}

any element a will be affected, including those without the attribute hreflang, in which case the function attr() return an empty string, which will generate content "()". Generated content is fully supported by Firefox, Opera, Safari, and Internet Explorer 8.

[Jevin]

It is also possible in CSS content from a URL, such as an image, for example to decorate an external link to an image evoking such a link.

<p> Text, with an external link with a Picture:
<a href="http://www.scenaryimages.com" rel="external"> Japan, The country of rising Sun </a>.</p>

We display all elements a an attribute rel value external image suggesting that this is an external link, which in CSS, gives the following code:

a [rel = "external"]: after {
content: url ('link-externe.png');
margin-left: 1ex;
}

Incidentally, a left margin is added, so that the image does not stick to the text of the link. The image is actually displayed.

[AK_Chopra]

Consider another case more complex. We have a list of tags and leave the following HTML snippet:

<ul id="tags">
<li> CSS </li>
<li> content generation </li>
<li> pseudo-elements </li>
</Ul>

First, we align the presentation of different tags. We also take this opportunity to remove the bullets and the default margins elements li.

# Tags {
   list-style: none;
 }
 # Tags li {
   display: inline;
   padding: 0;
   margin: 0;
 }

I hope that the list of tags to be identified as such. For this, we generate the text "Tags:" by applying it before the element ul , using the pseudo-element :before.

# Tags: before {
   content: "tags \ 0000a0";
 }

In addition, we want to distinguish the different tags by inserting a printable character (eg a dash) flanked by two spaces. We generate the whole before each element li , resulting in CSS:

# Tags li: before {
   content: "-";
 }

Each tag is thus preceded by a hyphen, including the first. In the latter case, the generation of content gives a result rather ugly ("Tags: - CSS"). Fortunately, it is possible to cancel the application generated content, and for this, we select the first element li using the pseudo-class :first-child , which can combine with other pseudo-classes and pseudo-elements. As for property content, we use it again, this time with the value none.

# Tags li: first-child: before {
   content: none;
 }