How to add text or characters using CSS (no javascript)?

Question

Well it should work in IE, I know IE doesnt support content property anything other that?

Solution 1

The only option is the the content property:

The content property is used with the :before and :after pseudo-elements, to insert generated content.

But as you point out, this is part of CSS 3 and is not supported by IE. In the meantime you will need to compensate by using JavaScript.

Solution 2

It is quite possible to solve this without Javascript, using a combination of HTML and CSS. The trick is to duplicate the content added by the CSS in the HTML an IE-specific conditional comment (not shown by other browsers) and use the display CSS selector to toggle when that element is shown. According to MSDN, IE 8+ supports CSS :after and content:, so only IE 7 and below need to use a conditional comment.

Here is an example:

<style type="test/css" media="screen">
.printonly { display: inline; }
</style>

<style type="text/css" media="print">
#maintitle:after { content:" \2014  Site Title";} /* for IE8+ and Other Browsers. sidenote: Can't use &mdash directly in generated content, so using escape code */
.printonly { display:inline } /* For IE <= 7 */
</style>

<h1 id="maintitle">Page Title 
    <!--[if lte IE 7]><span class="printonly">&mdash; Site Title</span><![endif]-->
</h1>

Solution 3

Short of pictures of text — no.

Solution 4

You could try using IE8.js to fix content, which might do the trick. If not, then there's nothing you can do besides background-image's with text

View more solutions