引用符をSVGにblockquote要素に付けている飾りの引用符をSVGでやることにした。フォントだとサイズ(特に横幅)を合わせるのが難しいので。アイコンみたいなコンテナー要素のサイズに合わせてぴったりサイズを縮小拡大したい場合はSVGが最適解だと思う。もののついでにhr要素もSVGで書き直した。 Demo: Quote SVG デモでは黒の不透明にした。path要素のstyle属性でfillとopacityプロパティーを使って色は調整できる。あとはこれをData URIスキームを使ってCSSに埋め込めば良い。 blockquote::before { margin-right: 1em; display: block; position: absolute; right: 100%; width: 2em; height: 2em; background-image: url("data:image/s
