CSSでローマ数字と○1などを画像で入れ替えたい

質問

文中の英数字のIや○1を画像と入れ替えできないかと思ったのですが、いい方法ないでしょうか？
できればCSSを使って管理したいのでお願いします。

実際は下記のような感じで使用したいと思ってます。
------------------------------------------------------
左の表<span class="maru1">(1)</span>を見てください。
------------------------------------------------------

回答No.2

lostmanweb

初めまして。
考え方としてはこんな感じだと思います。
────────────────────────
<style type="text/css">
<!--
.box01 {
background: url(001.gif);
background-repeat: no-repeat;
}
.inline {
visibility: hidden;
}
-->
</style>
────────────────────────
<div class="box01">
<span class="inline">(1)</span>文字列
</div>
────────────────────────
段落の文字列を梱包しているブロックレベル要素の背景画像に、表示させたいイメージを配置します。
CSSがオフになっている時に表示させたい文字列を<span>で囲み、表示を隠します。
あとは背景画像と文字のバランスを微調整すれば良いかと思います。
いかがでしょうか？

回答No.1

leap_day

こんにちは

20*20px位の画像を用意して

<style type="text/css"><!--
.maru1 {
background-image:url("maru1.jpg");
}
--></style>

左の表<span class="maru1">　　</span>を見てください

でできるのはできますよ
<span>はインライン要素なのでwidthを使えないため<span>内は全角スペース2個です(とりあえず)

お礼

回答ありがとうございます。

ですが、その方法だとCSSをオフにしている人、それからプリント時に代替テキストが表示されなくなってしまいますよね？
それを避けるために「<span class="maru1">(1)</span>」とカッコの文字を入れておき、それを入れ替える形で使いたいんです。
block要素にしちゃうと改行されちゃうし、:afterや:beforeはIEで対応してない……

無理ですかね？