🐵

【css】疑似要素でアイコンをいい感じで配置する【::before::after】

2024/12/09に公開

CSS

1.アイコンを準備する

縦横比が同じで、かつ透過処理されているものが使いやすいです。
サンプルで50px×50pxの白い虫眼鏡の透過処理されたpngファイルを置いておきます。
アイコンをダウンロードする

2.htmlを記述する

<div>
  <button id="icon16">検索</button>
  <button id="icon18">検索</button>
  <button id="icon20">検索</button>
</div>

今回はbutton要素に配置。

3.下準備となるcssを記述する

#icon16{
  position: relative;
  padding:0.5rem 1rem 0.5rem 2rem;/* アイコン（左）側の余白はfontsizeの2倍 */
  font-size: 16px;
}
#icon18{
  position: relative;
  padding:0.5rem 1rem 0.5rem 2rem;/* アイコン（左）側の余白はfontsizeの2倍 */
  font-size: 18px;
}
#icon20{
  position: relative;
  padding:0.5rem 1rem 0.5rem 2rem;/* アイコン（左）側の余白はfontsizeの2倍 */
  font-size: 20px;
}

アイコンを配置する側の余白は、フォントサイズの2倍にする。

4.アイコン配置のcssを記述

#icon16::before{
  position: absolute;
  top: 10px;/* fontsizeの2/3 */
  left: 8px;/* fontsizeの1/2 */
  width: 16px;/* fontsizeと同じ */
  height: 16px;/* fontsizeと同じ */
  content: "";
  background: url('icon-magnifier.png')no-repeat;
  background-size: contain;
}
#icon18::before{
  position: absolute;
  top: 12px;/* fontsizeの2/3 */
  left: 9px;/* fontsizeの1/2 */
  width: 18px;/* fontsizeと同じ */
  height: 18px;/* fontsizeと同じ */
  content: "";
  background: url('icon-magnifier.png')no-repeat;
  background-size: contain;
}
#icon20::before{
  position: absolute;
  top: 14px;/* fontsizeの2/3 */
  left: 10px;/* fontsizeの1/2 */
  width: 20px;/* fontsizeと同じ */
  height: 20px;/* fontsizeと同じ */
  content: "";
  background: url('icon-magnifier.png')no-repeat;
  background-size: contain;
}

topはフォントサイズの2/3
left（アイコンを配置する側）はフォントサイズの1/2
widthとheightはフォントサイズと同じ

5.hoverした時に色を変えてみる

#icon16:hover {
  color: #333333;
  background: #ffffff;
  transition: .5s;
}
#icon16:hover::before{
  filter: brightness(0) saturate(100%) invert(0%) sepia(0%) saturate(6671%) hue-rotate(169deg) brightness(96%) contrast(61%);
  transition: .5s;
}
#icon18:hover {
  color: #333333;
  background: #ffffff;
  transition: .5s;
}
#icon18:hover::before{
  filter: brightness(0) saturate(100%) invert(0%) sepia(0%) saturate(6671%) hue-rotate(169deg) brightness(96%) contrast(61%);
  transition: .5s;
}
#icon20:hover {
  color: #333333;
  background: #ffffff;
  transition: .5s;
}
#icon20:hover::before{
  filter: brightness(0) saturate(100%) invert(0%) sepia(0%) saturate(6671%) hue-rotate(169deg) brightness(96%) contrast(61%);
  transition: .5s;
}