Twitterとかでたまに見るこれ、実は再現するのは結構難しいのでは？と思いほぼCSSのみで再現することに。
とりあえずHTMLを最低限書く
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div id="box"></div>
</body>
</html>
「ＣＳＳ完全に理解した」の文字もCSSでやりたいのでHTMLにはdiv要素を置くだけにする。
CSSを書いてく
本題のCSSを書いていく。
ボックスの枠
# box {
font-size: 25px;
position: relative;
margin: 0;
width: 7.5em;
height: 4em;
border: solid 1.5px black;
border-radius: 20px;
}
あとで疑似要素を使うのでposition: relativeを設定しておく。
また、幅と高さはフォントサイズを基準にするために単位はemを使用。
※borderの幅を1.5pxにしているが、1pxとさほど変わらない。（拡大すると違う）
「ＣＳＳ完全に理解した」の文字
# box::after {
position: absolute;
top: 0;
right: -1.5em;
width: 7em;
font-size: inherit;
white-space: pre;
content: "ＣＳＳ\A完全に理解した";
}
ここで疑似要素の出番。
position: absoluteを設定して、#box要素を基準にいい感じの位置になるように調整する。
また、white-space: preを設定することでcontentの文字列で改行できるようにする。
完成
これで、おなじみの「ＣＳＳ完全に理解した」が完成した。
我ながら素晴らしい再現度だ