アマゾンプライムデー開催中!6/22まで 

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="naname1">斜め線 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="naname1">横線</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="naname1">二重線</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%;
}

【開催中】お得情報

デザイナーのUIメモ帳

レイアウト

ヒーローエリア

フォーム

画像

テキスト

ナビゲーション

コンテンツ

CSSデザインサンプル

モバイルサイト

Javascript

Google Map

Youtube

  • このエントリーをはてなブックマークに追加