CSS3で、ダミーテキストを簡単に表示できるのか？

とりあえずJavaScript

ダミーテキストを出してくれるjQueryのプラグインもあるので、試してみてもいいかもしれません。

lorem.js - github

lorem.jsの記述

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="lorem.js"></script>

<div data-lorem="2p"></div>
<img src="" data-lorem="gray" width="100" height="124">

ただdata-*属性を付けるのが面倒なので「要素が空なら出す」というのがいいかもしれません。
jQueryで簡易的にやるとこんな感じです。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
  // 複数設定
  $("h1:empty, h2:empty, h3:empty").prepend("見出し");

  // 範囲を絞りたいなら、CSSみたいに追加。
  // 他のJSとの関係がある場合は、絞った方がいいかもね。
  $("#area p:empty").prepend("#areaの中のダミーテキスト");  

  $("p:empty").prepend("ダミーテキスト");

  // p以外でも
  $("li:empty").prepend("ダミーテキスト　リスト表示");


  $("img[src='']").attr("src", "dummy.png");
});
</script>

サンプル(JSの内容をちょっと変更)

何かのJSファイルと一緒にしたり、テンプレートやCMSで作ってるなら、一括で追記消したりできるからいいかもしれません。
ただ静的に作っていたりすると、外部にしたとしても追記、削除が面倒くさいです。

CSSでもやっちゃう(ただしIE8以上)

1サイトに必ずCSSファイルは存在するだろうし、@importで読み込めば不要になった時も削除が簡単です。
そこで考えたのが、属性セレクタと擬似要素を使った方法。

classを使ってのダミーテキスト表示

<style rel="stylesheet" type="text/css">
.d:before {
  content:"ダミーテキスト";
}

/* Firefoxの場合は画像のリクエストがないと表示されない。
    Firefoxに限り、CSSだけで画像を出すのは難しいかも */
img[src=""] {
  background:#aaa;
}
/* 範囲によって表示内容を変えたり */
#area .d:before {
  content:"以下の文章はサンプルです。内容は適切に書き変われます。いろはにほへと ちりぬるを わかよたれそ つねならむ うゐのおくやま けふこえて あさきゆめみし ゑひもせす";
}
/* 少し大きめの画像を用意すれば、backgroundで縦横比を関係無しに配置可能。(Firefox除く) */
#area img[src=""] {
  background:url(dummy.jpg) 50% 50%;
}
</style>

classを使ったサンプル

classでやってしまうと、1つの要素に複数のclassを指定した場合、ダミーテキスト用のclassが見失いやすくなります。 置換を行う場合も、面倒くさい。

グローバル属性を使ってみる(ただしIE8以上)

グローバル属性とは

すべてのHTML要素に共通で指定することができる属性です。

• accesskey
• class
• hidden
• id
• lang
• style
• title
• など

classだと複数指定になる場合もあり、別属性で指定してしまった方が良いかもしれません。
ダミーテキストは仮で入れるものだし、定義されているグローバル属性で考えた場合、hiddenならありかなと思いました。

<style rel="stylesheet" type="text/css">
[hidden] {
  display:block;
}
[hidden]:before {
  content:"dummy";
}
h1[hidden]:before {
  content:"見出し";
}

/* 意図しないものは、打ち消しておく。 */
input[type="hidden"] {
  display:none;
}
</style>

<h1 hidden></h1>

<p hidden></p>

<p>ここはダミーじゃないよ</p>

グローバル属性を使用したサンプル

HTMLに記述することになりますが、「(スペース)hidden」の一括置換でhidden属性がとりやすいです。

グローバル属性も使わない(ただしIE9以上)

でもグローバル属性すらもHTMLに記述するのが面倒くさい。
IE9以上なら、:emptyという擬似classが使用できます。
このclassは、要素が空の場合にスタイルを適用する、ということができます。

<style rel="stylesheet" type="text/css">
:empty:before {
　content:"ダミーテキスト";
}

/* 範囲によって表示内容を変えたり */
#area p:empty:before {
  content:"以下の文章はサンプルです。内容は適切に書き変われます。いろはにほへと ちりぬるを わかよたれそ つねならむ うゐのおくやま けふこえて あさきゆめみし ゑひもせす";
}
</style>

IE9以上なのがデメリットだけど、HTMLを全く触らずにダミーテキストを出すことができるので、一番楽かもしれません。

:emptyを使用したサンプル

おまけ：属性セレクタの応用(ただしIE7以上)

上記の記述で属性セレクタ([attribute="value"]の指定)を紹介しましたが、属性セレクタは確認など様々な場合に応用が利きやすいです。

以下は属性セレクタを使用したCSSの応用です。

<style rel="stylesheet" type="text/css">
a[href=""],
a[href="#"] {
  border:1px solid #f00;
}
</style>

<a href="">ここに赤枠ができるよ、リンクをはってね。</a>
<a href="#">ここに赤枠ができるよ、リンクをはってね。</a>
<a href="/welcome.html">リンクはもうはってるよ。</a>

<style rel="stylesheet" type="text/css">
a[href^=http] {
  border:1px solid #f09;
}
a[href^=http][target] {
  border:1px solid #000;
}
</style>

<a href="http://example.com">ここにピンクの枠ができるよ、外部なのに_blankがない</a>
<a href="index.html">外部じゃないよ</a>
<a href="http://example.com" target="_blank">ここに黒枠が付くよ</a>

<style rel="stylesheet" type="text/css">
[id|=title] {
  border-bottom:1px solid #aaa;
  padding:1em 0;
}
/* #title または #titile- とついてるものに、上のスタイルを適用することができる */
#title-windows {color:#333;}
#title-mac {color:#666;}
#title-linux {color:#999;}
</style>