::before ::after を使っていこう

擬似要素タグbeforeとafterを活用しよう！基礎知識と使い方を解説！

CSSの疑似要素とは？beforeとafterの使い方まとめ

アイコンフォントを使う例

◯:before {
  font-family: FontAwesome;
  content: '\f1e2';
}

引用ボックスを作る

 

手順リストを作る

.flow li:not(:last-child):after{
  font-family: 'FontAwesome';
  content: '\f0a7';
  display: block;/*前後に改行*/
  font-size: 2em;/*アイコンサイズ*/
  color: skyblue;/*色*/
  padding: 0.3em;/*余白*/
}
ブラウザ表示例

 

 

 

【CSS】content内で改行やスペースを入力する方法

 

white-space: pre-wrap;
  content: 'ウェーイウェーイウェーイウェーイ\Aフゥー！';
  font-size: 2em;
}

white-space: pre-wrap;
  content: 'ウェーイ    フゥー！';

 

【CSS】疑似要素の画像サイズを変更する方法

 

背景画像として表示させれば変更可能に

.example:before {
  content: '';/*何も入れない*/
  display: inline-block;/*忘れずに！*/
  width: 50px;/*画像の幅*/
  height: 50px;/*画像の高さ*/
  background-image: url(../img/face.png);
  background-size: contain;
  vertical-align: middle;
}

【参考】背景画像をレスポンシブにする方法

.example {
  position: relative;/*相対配置*/
}

.example:before {/*スペースを作る*/
  content: '';
  top: 0;
  left: 0;
  width: 100%;/*指定したい幅*/
  padding-top: 90%;/*画像の幅に対する高さ比率*/
  display: block;
}

.example:after {/*画像を絶対配置*/
  position: absolute;
  content: '';
  top: 0;
  left:0;
  display: block;
  width: 100%;/*幅*/
  height: 800px;/*どれだけデカくなってもはみ出ないであろう高さを指定*/
  background-image: url(../img/face.png);
  background-size: contain;
  background-repeat: no-repeat;/*画像を繰り返さない*/
  }