ネタバレなコメント内容などをCSSなどで一旦隠してクリックしたら表示させる方法

レビューサイト運営をしていて、コメントを受け付けていると結構ネタバレな内容で投稿してくる方がいます。
初見の人がいきなりネタバレ内容が目に入ってしまうと、色々とまずい。
クレームの種になっちゃいそうなものは、隠してしまって読みたい人はクリックしたら表示されるようにするのが理想です。
これから紹介する方法だと、display:none とか使わずに、実現できます。display: noneとか便利だけど、多用するとSEO的にどうなの？とか不安になってきますよね。でもこれなら大丈夫。
また、隠すと言っても以下のDEMOのように、モヤモヤとしたモザイクがかかる感じなので、一目で隠されているテキストだとわかってもらって、ユーザビリティ的にも最適です。

DEMO

ネタバレなコメント内容を一旦隠して、見たい人はクリックしたら読めるような感じにしたいです。ネタバレなコメント内容を一旦隠して、見たい人はクリックしたら読めるような感じにしたいです。ネタバレなコメント内容を一旦隠して、見たい人はクリックしたら読めるような感じにしたいです。ネタバレなコメント内容を一旦隠して、見たい人はクリックしたら読めるような感じにしたいです。

導入手順

隠したいコメントを、class名 netabare on で囲む


ネタバレなコメント内容を一旦隠して、見たい人はクリックしたら読めるような感じにしたいです。 
ネタバレなコメント内容を一旦隠して、見たい人はクリックしたら読めるような感じにしたいです。
ネタバレなコメント内容を一旦隠して、見たい人はクリックしたら読めるような感じにしたいです。 
ネタバレなコメント内容を一旦隠して、見たい人はクリックしたら読めるような感じにしたいです。

CSSを適用する。

.netabare {
  position: relative;
  box-sizing: border-box;
  cursor: pointer;
}
.netabare.on {
  color: rgba(0,0,0,0);
  text-shadow: 0 0 10px #000;
}
.netabare.on:before {
  content: 'ネタバレあり ⇒ クリックで表示';
  position: absolute;
  text-shadow: none;
  color: #fff;
  width: 220px;
  height: 28px;
  line-height: 28px;
  left: 50%;
  top: 50%;
  text-align: center;
  background-color: #cb2222;
  margin-left: -110px;
  margin-top: -14px;
}

jQueryのコードをページ下に設置する。

以上です。簡単ですね。