cssのbefore・afterを画像にする

cssのbefore・afterを画像にする

::beforeと::afterのアイコン

.fvframe::before {
content: ‘ ‘;
display: inline-block;
width: 50px;
height: 50px;
background-image: url(../images/gazou.png);
background-size: contain;
vertical-align: middle;
}

::beforeと::afterのアイコンポジションabsolute（固定）

.fvframe {
  position: relative;
}
.fvframe::before {
  content: ' ';
  display: inline-block;
  width: 50px;
  height: 50px;
  background-image: url(../images/gazou.png);
  background-size: contain;
  vertical-align: middle;
  position: absolute;
  background-repeat: no-repeat;
  top: 10px;
  left: 10px;
}

« ハンバーガーメニュー・左から出て右へ消える

2024/12/11更新