HTML,CSS初心者です。：beforeで挿入したimg画像のサイズを変えるにはどのようにしたら良いでしょうか｛li1:before｝。

HTML

<div class="wrapper">
        <nav>
          <ul class="review">
            <li>家具・インテリアTOPICS</li>
            <li><a href="#" class="li1">grafの世界に触れる!</a></li>
            <li><a href="#">400台限定!特別仕様の「PK22」</a></li>
            <li><a href="#">ありそうでなかった!アートな佇まいのミラー</a></li>
            <li><a href="#">家具・インテリアショップのクーポンまとめ</a></li>
            <li><a href="#">石巻にて「本棚づくりワークショップ」開催</a></li>
            <li><a href="#">柳宗理、「コノハ柄」ファブリック復刻販売!</a></li>
            <li><a href="#">キタニの「Ever Green 不朽の名作たち」展</a></li>
            <li><a href="#">「そうだ、ロイズの倉庫へいこう!!」開催</a></li>
            <li><a href="#">名作チェアでコンサート</a></li>
            <li><a href="#">情報求む!カンディハウス幻の椅子</a></li>
            <li><a href="#">家具TOPICS一覧を見る</a></li>
          </ul>
        </nav>
</div>
コード

CSS

.wrapper {
  background-color: #f0f0f0;
  padding: 5px;
  margin-top: 20px;
}
.review {
background-color: #ffffff;
border: 1px solid #c2c2c2;
padding: 0 15px;
}
.review li {
  line-height: 70px;
  border-bottom: 1px dotted #c2c2c2;
}
.review li:first-child {
  border-bottom: 1px solid #c2c2c2;
}
.review li:last-child {
  border-bottom: none;
}
.review a {
  text-decoration: none;
  display: block;
  color: #24203b;
}
.review a:after {
  height: 40px;
  content: url("../img/serch_arrow.png");
  float: right;
  display: block;
  margin-top: 15px;
}
.li1:before {
  content: url("../img/k_1.jpeg");
}
コード

m.ts10806

2018/04/25 00:37

質問編集画面タイトル横にある「初心者アイコン」をご活用ください。「初心者」と質問で書くよりも伝わります。また、タイトルには要件「のみ」を書きましょう。　https://teratail.com/help/question-tips#questionTips3-1

行動規範の内容に同意します

回答1件

contentで出力した画像の幅は変更できないので、
backgroundで画像をいれて、
background-sizeはcontainでwidthとheightを指定するのがいいと思います。

css
1.li1:before {
2  background: url("http://placehold.jp/18/ffffff/000000/30x30.png?text=▼") no-repeat center / contain;
3  content: '';
4  display: inline-block;
5  width: 20px;
6  height: 20px;
7}