Ringo-Cafe

beforeとafter(cssの疑似要素)を使い倒す! その1 contentを使おう編

12/23/2019

はじめに


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

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

使い方


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

![image](//images.ctfassets.net/gyhdnnh1ztbe/7HiwEbgAwIlxAO0rdF8E9E/3970b275d421e61f2b0fbaf411300f8d/image.png)

.midasi::before{
}   


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

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

文字を入れてみます。


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



![image](//images.ctfassets.net/gyhdnnh1ztbe/2z7VP6nB54naCrZoFYOJIi/fdd37f92e7b1a3a87cf96d3987cfc618/image.png)

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


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


![image](//images.ctfassets.net/gyhdnnh1ztbe/2617sylad9eTAhJVjpnSTZ/1f263aae8fd11e795baede8614484315/image.png)

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

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

.midasi{
  position: relative;
}


終わりに


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

トップへ戻る