「突然の死」の引用スタイル .totsuzennoshi

クラスひとつで「突然の死」が実装できる .totsuzennoshi を作りました。

スクリーンショット

引用文の長さは14文字程度まで対応しています。

コード

HTML

<blockquote class="totsuzennoshi">
  <p>突然の死</p>
</blockquote>

<blockquote class="totsuzennoshi">
  <p>引用スタイル</p>
</blockquote>

<blockquote class="totsuzennoshi">
  <p>引用スタイル・文字長め</p>
</blockquote>

CSS

.totsuzennoshi {
  overflow: hidden;
  font-family: serif;
  line-height: 1.25;
}
.totsuzennoshi:before,
.totsuzennoshi:after {
  display: inline-block;
  width: 1em;
  vertical-align: top;
  word-break: break-all;
}
.totsuzennoshi:before {
  content: "＿＞￣";
}
.totsuzennoshi:after {
  content: "＿＜￣";
}
.totsuzennoshi p {
  position: relative;
  display: inline-block;
  margin: 0;
  padding: 1.25em 0.4em 1.25em 0.6em;
  overflow: hidden;
}
.totsuzennoshi p:before,
.totsuzennoshi p:after {
  position: absolute;
  white-space: nowrap;
}
.totsuzennoshi p:before {
  content: "人人人人人人人人人人人人人人人人人人";
  top: 0;
  left: 0.2em;
}
.totsuzennoshi p:after {
  content: "　Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y";
  bottom: 0;
  left: -0.55em;
  letter-spacing: 0.05em;
}

とりあえず Mac の主要ブラウザで動作確認済み。

• http://codepen.io/anon/pen/GZONgK