┌──────────────────────────────────────┐
│.css {                                                                      │
│    background-color  :中;                                                  │
│}                                                                           │
│.css::before {                                                              │
│    content           :"奥";                                                │
│    background-color  :奥;                                                  │
│}                                                                           │
│.css::after {                                                               │
│    content           :"手前";                                                │
│    background-color  :手前;                                                  │
│}                                                                           │
└──────────────────────────────────────┘
この場合、テキスト的には「奥 中 手前」の順に表示されるのだが
レイヤー的にも以下かと思いきや、以下なのだ
┌──────────┐┌──────────┐
│×┌───┐        ││○┌───┐        │
│  │奥┌───┐    ││  │中┌───┐    │
│  │  │中┌───┐││  │  │奥┌───┐│
│  │  │  │手前  │││  │  │  │手前  ││
└──────────┘└──────────┘

んじゃ、期待する左のようにするにはどうすればよいか？
┌──────────────────────────────────────┐
│.css::before {                                                              │
│    z-index           :-1;                                                  │
│}                                                                           │
└──────────────────────────────────────┘
「z-index」をマイナスで指定したあげればよい。(::afterでも同じ)

ただ注意点があって、本体(中)の方に「z-index」を指定してはいけない。
┌──────────────────────────────────────┐
│.css {                                                                      │
│    z-index           :2;                                                   │
│}                                                                           │
│.css::before {                                                              │
│    z-index           :-1;                                                  │
│}                                                                           │
└──────────────────────────────────────┘
こんな感じたよ奥にはいかない。

でも、本体(中)の方に「z-index」を指定したい、という時は、
「z-index」を指定する層を外側に出せばいいようだ。
┌──────────────────────────────────────┐
│.css {                                                                      │
│    z-index           :2;                                                   │
│}                                                                           │
│.css > div {                                                                │
│}                                                                           │
│.css > div::before {                                                        │
│    z-index           :-1;                                                  │
│}                                                                           │
└──────────────────────────────────────┘
HTML側はこれに伴い「<div class="css"><div></div></div>」みたいに入れ子にする。

┌──┐
│wbr │
└──┘
  文字数が多い場合に自動改行されるが、
  その場合の改行して欲しい位置を提示するもの
  Netscape時代の独自仕様がHTML5で標準仕様となった

┌──┐
│bdi │
└──┘
  一般的には文字の並びは左から右だが、
  アラビア語など一部の言語では右から左となっている。
  この点についてはブラウザ側で自動で判別して表示してくれるので
  タグ等を用いる必要はないのだが、それが誤認される場合(*1)などに
  bdiタグで囲って明示してあげる

  *1：例えば、アラビア語、数字、日本語の順に記載があった場合に、
      真ん中の数字が、アラビア語の一部として認識される
      これを防ぐために、アラビア語の部分をbdiタグで囲う(spanタグ代替といえる)

以下のような96px×96pxの画像を用意する。
┌─┬─┬─┐
│┏│━│┓│
├─┼─┼─┤
│┃│  │┃│
├─┼─┼─┤
│┗│━│┛│
└─┴─┴─┘

そして、以下のようなCSSを指定すると。
┌──────────────────────────────────────┐
│div {                                                                       │
│    height          :160px;                                                 │
│    width           :160px;                                                 │
│    background-color:#CCCCCC;                                               │
│                                                                            │
│    border-style    :solid;                                                 │
│    border-width    :32px;                                                  │
│    border-image    :url("画像.png") 32 repeat;                             │
│}                                                                           │
└──────────────────────────────────────┘

以下のように表示できる。
┌─┬─┬─┬─┬─┬─┬─┐
│┏│━│━│━│━│━│┓│
├─┼─┼─┼─┼─┼─┼─┤
│┃│  │  │  │  │  │┃│
├─┼─┼─┼─┼─┼─┼─┤
│┃│  │  │  │  │  │┃│
├─┼─┼─┼─┼─┼─┼─┤
│┃│  │  │  │  │  │┃│
├─┼─┼─┼─┼─┼─┼─┤
│┃│  │  │  │  │  │┃│
├─┼─┼─┼─┼─┼─┼─┤
│┃│  │  │  │  │  │┃│
├─┼─┼─┼─┼─┼─┼─┤
│┗│━│━│━│━│━│┛│
└─┴─┴─┴─┴─┴─┴─┘

線を引くcanvas処理。
┌──────────────────────────────────────┐
│コンテキスト.globalCompositeOperation = 'source-over';                      │
│コンテキスト.beginPath();                                                   │
│コンテキスト.moveTo(左, 上);                                                │
│コンテキスト.lineTo(右, 下);                                                │
│コンテキスト.closePath();                                                   │
│コンテキスト.strokeStyle = 色;                                              │
│コンテキスト.stroke();                                                      │
└──────────────────────────────────────┘
  ※左上が始点、右下が終点の場合(逆とかでもOK)

で、その線を消すcanvas処理。
┌──────────────────────────────────────┐
│コンテキスト.globalCompositeOperation = 'destination-out';                  │
│コンテキスト.beginPath();                                                   │
│コンテキスト.moveTo(左, 上);                                                │
│コンテキスト.lineTo(右, 下);                                                │
│コンテキスト.closePath();                                                   │
│コンテキスト.stroke();                                                      │
└──────────────────────────────────────┘
「.globalCompositeOperation」の指定を変えてあげる。
どちらかというと透明な線を上書する(下を潰す)ようなイメージか。

ただ、ちょっとずれて消す前の線が残ることもあるようだ。

確実なのは、以下のように線を引いた領域をまるごとクリアする方法のようだ。
┌──────────────────────────────────────┐
│コンテキスト.clearRect(左, 上, 右, 下);                                     │
└──────────────────────────────────────┘
もちろんこの方法だと、領域内の他の線も消えてしまうけどね。
(キャンバスを分けてレイヤー階層にするのがよいかも)

CSSで点滅させる方法。
(これだとJavaScriptでタイマを仕込んで定期的にトグルとかしなくてもよくなる)

まず、keyframes定義にて何らかの名称で属性を定義する。
ここでは「BLINK」という名称で定義した。
┌──────────────────────────────────────┐
│@keyframes BLINK {                                                          │
│    0% {                                                                    │
│        opacity :1.0;                                                       │
│    }                                                                       │
│    50% {                                                                   │
│        opacity :0;                                                         │
│    }                                                                       │
│}                                                                           │
└──────────────────────────────────────┘
「opacity」とは不透明度のことであり、「0」が透明となる。
つまり、始点(0%)では不透明(点灯)、終点では透明(消灯)となる指定を
「BLINK」に定義している
なお、本来終点は「100%」だが、後述の様に変化を一段で行うため、
今回は真ん中の「50%」を終点と見立てている

後は、それを各要素に対して、animation属性として定義してあげればOK。
┌──────────────────────────────────────┐
│div.light {                                                                 │
│    background-color    :#FFFF00;                                           │
│    animation           :BLINK 1.0s steps(1,end) 0s infinite normal;        │
│}                                                                           │
└──────────────────────────────────────┘
パラメータの詳細は以下のような感じ。
┌──────┬───────────────────────────────┐
│BLINK       │keyframes定義で定義した「BLINK」属性を用いる                  │
├──────┼───────────────────────────────┤
│1.0s        │処理周期1秒(1秒で点灯から消灯まで行われる)                    │
├──────┼───────────────────────────────┤
│steps(1,end)│変化の度合い                                                  │
│            │緩やかに変化させることもできるが、点滅なので、変化は一段のみ  │
├──────┼───────────────────────────────┤
│0s          │開始までの時間0秒(つまり、すぐ開始)                           │
├──────┼───────────────────────────────┤
│infinite    │繰り返し回数、無限(永久)                                      │
├──────┼───────────────────────────────┤
│normal      │順方向のみ                                                    │
└──────┴───────────────────────────────┘

アイコンをクリックする時に、クリックが多すぎると
画像が反転してしまう場合があある。
これを防止する方法。

以下のようなCSSを設定すればよい。
┌──────────────────────────────────────┐
│img {                                                                       │
│    -khtml-user-select  :none;                                              │
│    -moz-user-select    :none;                                              │
│    -webkit-user-select :none;                                              │
│    user-select         :none;                                              │
│}                                                                           │
└──────────────────────────────────────┘

┌──────────────────────────────────────┐
│img {                                                                       │
│    filter              :alpha(opacity=30);     /* 旧IE(IE4以降) */         │
│    -ms-filter          :"alpha(opacity=30)";   /* 旧IE(IE8以降) */         │
│    -moz-opacity        :0.3;                   /* 旧Firefox     */         │
│    -khtml-opacity      :0.3;                   /* 旧Safari      */         │
│    opacity             :0.3;                   /* CSS3          */         │
│}                                                                           │
└──────────────────────────────────────┘
上記は画像を「30%」の濃さに薄める場合の例。

CSS3等で画像を横に反転させる方法(左右対称)。
┌──────────────────────────────────────┐
│img {                                                                       │
│    filter              :FlipH;             /* 旧IE(IE4以降)      */        │
│    -ms-filter          :"FlipH";           /* 旧IE(IE8以降)      */        │
│    -moz-transform      :scaleX(-1);        /* 旧Firefox          */        │
│    -webkit-transform   :scaleX(-1);        /* 旧Chrome、旧Safari */        │
│    -o-transform        :scaleX(-1);        /* Opera              */        │
│    transform           :scaleX(-1);        /* CSS3               */        │
│}                                                                           │
└──────────────────────────────────────┘

CSS3等で画像を縦に反転させる方法(上下対称)。
┌──────────────────────────────────────┐
│img {                                                                       │
│    filter              :FlipV;             /* 旧IE(IE4以降)      */        │
│    -ms-filter          :"FlipV";           /* 旧IE(IE8以降)      */        │
│    -moz-transform      :scaleY(-1);        /* 旧Firefox          */        │
│    -webkit-transform   :scaleY(-1);        /* 旧Chrome、旧Safari */        │
│    -o-transform        :scaleY(-1);        /* Opera              */        │
│    transform           :scaleY(-1);        /* CSS3               */        │
│}                                                                           │
└──────────────────────────────────────┘

CSS3等で画像を縦横に反転させる方法(斜対称)。
┌──────────────────────────────────────┐
│img {                                                                       │
│    filter              :FlipH FlipV;       /* 旧IE(IE4以降)      */        │
│    -ms-filter          :"FlipH" "FlipV";   /* 旧IE(IE8以降)      */        │
│    -moz-transform      :scale(-1, -1);     /* 旧Firefox          */        │
│    -webkit-transform   :scale(-1, -1);     /* 旧Chrome、旧Safari */        │
│    -o-transform        :scale(-1, -1);     /* Opera              */        │
│    transform           :scale(-1, -1);     /* CSS3               */        │
│}                                                                           │
└──────────────────────────────────────┘

CSS3のtransformに対応しているのは、
今のところ最新の「Firefox、Chrome、Safari」のみ。

これまでid属性で識別していた領域が、そのままタグ名として識別できるようになる。
┌──────────────────────────────────────┐
│<div id="header">                                                           │
│  ：                                                                        │
│</div>                                                                      │
├──────────────────────────────────────┤
│div#header {                                                                │
│    ：                                                                      │
│}                                                                           │
└──────────────────────────────────────┘
以下のように書き換えるだけでよい。
┌──────────────────────────────────────┐
│<header>                                                                    │
│  ：                                                                        │
│</header>                                                                   │
├──────────────────────────────────────┤
│header {                                                                    │
│    display:block;                                                          │
│    ：                                                                      │
│}                                                                           │
└──────────────────────────────────────┘
但し、「display:none;」が既定のようなので、
「display:block;」をつける必要があるようだ。