【CSS】borderメモ

……メモばっかり (^0^;)

CSSで見出しとかに

  • ボーダー引きたい
  • 2重線にしたい
  • 片方は点線
  • 片方は実線で太さを太くしたい

ってとき。

h2 { border-bottom: 2px solid #c4ae07; position: relative;  }
h2:after { content: ""; display: block; width: 	100%; border-bottom: 1px dotted #c4ae07; position: absolute; left: 0; bottom: 3px; }

スクリーンショット 2014-11-25 16.39.16

って感じでできた。
afterは要素内に入るから、h2にpadding入ってると、内側に描画されるから、position使って浮かせて配置し直し。

返信を残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA