CSS 打ち消し線/斜線/横線/二重線(複数行対応)を作る

価格や訂正で使用する打ち消し線は<strike>で実現できますが、CSSでも可能です。CSSだと線の色を変えたり向きを変えたりすることができます。

• 色変更可
• spanを使用

デモ

See the Pen
text-decoration line by kura (@kuranopen)
on CodePen.

斜め線 1

HTML

<span class="naname1">斜め線 1</span>

CSS

.naname1{
  position: relative;
}
.naname1::before {
  position: absolute;
  content: "";
  display: block;
  transform: rotate(10deg);
  background-color: red;
  width: 100%;
  height: 1px;
  top: 50%;
  left: 0;
}

斜め線 2

HTML

<span class="naname2">斜め線 2</span>

CSS

.naname2{
  position: relative;
}
.naname2::before {
  position: absolute;
  content: "";
  display: block;
  transform: rotate(-10deg);
  background-color: red;
  width: 100%;
  height: 1px;
  top: 50%;
  left: 0;
}

横線

HTML

<span class="yoko">横線</span>

CSS

.yoko{
  position: relative;
}
.yoko::before {
  position: absolute;
  content: "";
  display: block;
  transform: rotate(0);
  background-color: red;
  width: 100%;
  height: 1px;
  top: 50%;
  left: 0;
}

二重線

HTML

<span class="nijiu">二重線</span>

CSS

.nijiu{
  position: relative;
}
.nijiu::before,
.nijiu::after {
  position: absolute;
  content: "";
  display: block;
  transform: rotate(0);
  background-color: red;
  width: 100%;
  height: 1px;
  left: 0;
}
.nijiu::before {
  top: 55%;
}
.nijiu::after {
  top: 42%;
}

二重線 (複数行対応)

HTML

<span class="nijiu">二重線</span>

CSS

.nijiu{
  text-decoration: line-through;
  text-decoration-color: #c73339;
  text-decoration-style: double;
}

デザインを本で学びたい人向けの記事

初心者ノンデザイナーがこれからデザインを勉強するのにおすすめの本 4選