CSS完全に理解した

Google の新しい棒でも話題の「CSS完全に理解した」をやってみた。

CSS 完全に理解した！

俺のアンサーはこれだ!!!

See the Pen CSS 完全に理解した by KIKIKI (@kikiki_kiki) on CodePen.

コード

HTML はとてもシンプルに

<div class='css'>CSS<wbr>完全に理解した</div>

<wbr> を使って改行箇所の指定を入れているのがポイント。半角英数の後には半角スペース入れる派なので overflow-wrap と word-break をいい感じに指定しておけば CSS の後で改行されるはずだけど <wbr> 使ってみたかっただけ。半角スペース入れないなら普通に <br> で良いと思う。

CSS

:root {
  --box-width: 8em;
  --box-padding: 1rem;
  --translate-x: 3.5rem;
}

.css {
  position: relative;
  display: block;
  padding: var(--box-padding);
  overflow-wrap: break-word;
  word-break: keep-all;
  width: var(--box-width);
  transform: translateX(var(--translate-x));
}

.css:before {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  content: '';
  width: 100%;
  height: 100%;
  border: 1px solid rgba(0,0,0,1);
  border-radius: 1em;
  transform: translateX(calc(-1 * var(--translate-x)));
}