「CSS完全に理解した」の再現 〜疑似要素編〜

Introduction

「CSS完全に理解した」Tシャツは以前から知っていて、ネタとして面白いし、敢えてそのデザインを再現するには多少CSSの理解が必要になってきて、深いな(?)と思っていました。

そんな中最近この記事を見つけ、楽しく拝見させていただき、これに触発される形でこの記事を書こうかなと思いました。

こちらの記事で前提としている状態とは違ってしまいますが、 一番シンプルに再現できそうな方法で実際に作ってみました。

Results

まずは最終的なコードから。

See the Pen I understand the css completely. by ryo tate (@ryo_tate) on CodePen.

疑似要素だけで外側の枠を再現するので、HTMLは最低限の<p>だけで済みます。
テキストの増減にも問題なく対応

テキストを囲うボーダーを用意するために、

1. p はブロック要素なので、右端まで要素が伸びてしまうのを防ぐため、inline-block にしておきます。
2. p に position: relative を付け、
3. p の疑似要素(::before)にはborderとradius、position: absoluteで浮かせ、
4. top, left, right, bottom をそれぞれ 0 にしたのが下の状態です。
   そこから枠を左にズラすため、
5. transform: translateX(-40px); を当てます。

基本的には上記の5手順で再現はできます。
top, left, right, bottom のそれぞれをマイナスにすることで padding を当てたときと同じような余白を再現できます。（今回はそれぞれ -10pxを当ててみました。）
親要素に余白を何も当てていないと p は左端に行ってしまい、枠が画面外へはみ出てしまうため、今回はmargin も当てて枠が全て見えるようにしておきました。

Conclustion

いかがだったでしょうか。
疑似要素を上手く使うことで表現の幅が広がり、HTMLをシンプルに保てる場面が非常に多くあります。
疑似要素が使いこなせれば「CSS完全に理解した」状態にグッと前進すると思うので、是非使ってみてください。