before・afterをcssで画像にする

before・afterをcssで画像にする

HTML

<p class="fvframe">テキスト</p>

::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;
}

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

2025/01/09更新