はじめに

見出しの頭に縦棒をつけたいけど、縦棒の長さを文字よりも短くしたい・・・
こんなときってありますよね。

そういったときにbefore!を使いましょう！

使い方

もともとの見出しがこいつだとすると。

.midasi::before{
}

こんな感じで指定します。
:（コロン）を2つつけるのはcss3の記法です。1つでもブラウザ対応してますが、2つのほうがかっこいいです（ぉ）

注意点
beforeにはcontentプロパティが絶対必要です。

文字を入れてみます。

.midasi::before{
  content: "ビフォアだよん";
}

好きなサイズのブロックを出してみます。

.midasi::before{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 10px;
  height: 20px;
  background: #00f;
}

縦位置中央は、top: 50%; と transform: translateY(-50%) をつけてあげるとよいかと。
写真は縦位置中央にしたパターンですね↑

また、position: absolute; をつけるときは、親要素に position: relative; を忘れずにつけてくださいね。

.midasi{
  position: relative;
}

終わりに

今日はここまで！
スペシャルサンクス：ちょめこさん
記事を書くきっかけをくれました。