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?

Bart Friederichs · Accepted Answer · 2013-01-31 09:00:00Z

13

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.

edited Jan 31, 2013 at 9:00

Bart Friederichs

33.8k16 gold badges112 silver badges219 bronze badges

answered Sep 16, 2009 at 20:00

Andrew Hare

353k75 gold badges649 silver badges642 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Jessica Brown · Accepted Answer · 2012-05-01 17:07:57Z

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>

Quentin · Accepted Answer · 2009-09-16 19:59:45Z

1

Short of pictures of text — no.

answered Sep 16, 2009 at 19:59

Quentin

949k136 gold badges1.3k silver badges1.4k bronze badges

Comments

Jani Hartikainen · Accepted Answer · 2009-09-16 20:03:00Z

1

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

answered Sep 16, 2009 at 20:03

Jani Hartikainen

43.4k11 gold badges70 silver badges87 bronze badges

Comments

Allan Kimmer Jensen · Accepted Answer · 2009-09-18 09:30:01Z

0

The only way is JavaScript, or CSS3.

Maybe you could tell us what you need to do - then we can help.

Why can't you do it with js?

answered Sep 18, 2009 at 9:30

Allan Kimmer Jensen

4,4192 gold badges35 silver badges54 bronze badges

Collectives™ on Stack Overflow

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

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related