指定した要素にだけ画像を挿入したい

Question

前提・実現したいこと

指定した要素には画像を差し込みたいです。
今回の場合ですと、初めの２つの要素には画像を表示
それ以降には画像を表示させないようにしたいです。

発生している問題・エラーメッセージ

完成図

現在

このようにアイテムの３以降からも画像が表示されています。
ちなみに画像が違うのはお気になさらず。。

該当のソースコード

<% var topics = [
  {icon:"k_1.jpeg",text:"grafの世界観に触れる！",new:"recruit.png",arrow:"serch_arrow.png"},
  {icon:"k_2.jpeg",text:"400台限定！特別仕様の「PK22」",new:"recruit.png",arrow:"serch_arrow.png"},
  {icon:"k_3.jpg",text:"ありそうでなかった！アートな佇まいのミラー",arrow:"serch_arrow.png"},
  {icon:"k_4.jpg",text:"家具・インテリアショップのクーポンまとめ",arrow:"serch_arrow.png"},
  {icon:"k_5.jpg",text:"石巻にて「本棚づくりワークショップ」開催",arrow:"serch_arrow.png"},
  {icon:"k_6.jpg",text:"柳宗理、「コノハ柄」ファブリック復刻販売！",arrow:"serch_arrow.png"},
  {icon:"k_7.jpg",text:"キタニの「Ever Green 不朽の名作たち」展",arrow:"serch_arrow.png"},
  {icon:"k_8.jpg",text:"「そうだ、ロイズの倉庫へいこう!!」開催",arrow:"serch_arrow.png"},
  {icon:"k_9.jpg",text:"名作チェアでコンサート",arrow:"serch_arrow.png"},
  {icon:"k_10.jpg",text:"情報求む!カンディハウス幻の椅子",arrow:"serch_arrow.png"}
] %>
<div class="p-mainTopics">
  <div class="p-mainTopics__box">
    <div class="p-mainTopics__inner">
      <div class="p-mainTopics__title">
        <div class="p-mainTopics__title--text">
          <img src="<%= img %>category.png" width="40px"><p>家具・インテリアTOPICS</p>
        </div>
      </div>
      <div class="p-mainTopics__content">
        <% topics.forEach(function (value) { %>
          <ul class="p-mainTopics__item">
            <li class="p-mainTopics__item--link">
              <img src="<%= img %><%= value.icon  %> " width="50px">
              <div class="p-mainTopics__item--inner">
                <a href="/" class="p-mainTopics__item--text"><%= value.text %></a>
              </div>
              <img src="<%= img %><%= value.arrow %> " height="30px" width="30px">
            </li>
          </ul>
        <% }) %>
      </div>
      <div class="p-mainTopics__look">
        <img src="<%= img %>arrow.png"><a href="/">家具TOPICS一覧を見る</a>
      </div>
    </div>
  </div>
</div>

.p-mainTopics {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 980px;
  background-color: #fff;
}

.p-mainTopics__box {
  display: flex;
  justify-content: center;
  align-items: center;
  height: auto;
  width: 90%;
  border: solid 0.4rem rgb(219, 219, 219);
}

.p-mainTopics__inner {
  height: auto;
  width: 90%;
}

.p-mainTopics__title {
  display: flex;
  align-items: center;
  height: 60px;
  border-bottom: solid 2px #bbb;
}

.p-mainTopics__title--text {
  display: flex;
  justify-content: space-between;
  width: 80%;
  font-size: 12px;
  font-size: 1.2rem;
}

.p-mainTopics__item {
  display: flex;
  align-items: center;
  height: 80px;
  width: 100%;
  border-bottom: dotted 3px #bbb;
  &:hover {
    background-color: #bbb;
  }
}

.p-mainTopics__item--link {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 97%;
}

.p-mainTopics__item--inner {
  position: relative;
  width: 80%;
  margin-left: 10px;
}
/* 該当箇所 */
.p-mainTopics__item--text {
  position: relative;
  &::after {
    position: absolute;
    top: 100%;
    right: 0;
    height: 20px;
    width: 100%;
    background-image: url('#{$bgPath}recruit.png');
    background-repeat: no-repeat;
    content: '';
  }
  &:nth-of-type(n + 3) {
    display: none;
  }
}
.p-mainTopics__look {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 60px;
  width: 60%;
  &:hover {
    background-color: #bbb;
  }
}

試したこと

 &:nth-of-type(n + 3) {
    display: none;
  }

上記のように指定したのですが画像が表示されているので
（n + ３）　を２や１にしましたが、１にすれば画像は一つも表示
されず２の場合は、変わらず全ての要素に画像が表示されました。
現在はhtml側の方が怪しいと思い色々模索している最中です。

お時間ございましたらご教授して頂きますと助かります。

補足情報（FW/ツールのバージョンなど）

・npm -v　6.9.0
・node -v　12.6.0
補足画像

Comments

[hoshi-takanori]

それは CSS ではなく topics の各要素 (value) に new かどうかのフラグを持たせるべきでは…。

[harigoE8]

つまり疑似要素で画像を差し込まず、html側でimgを設定して調整する
イメージでしょうか？

[hoshi-takanori]

はい。その方が、最初の 2 つだけとか決め打ちにしなくていいので。

[harigoE8]

<% topics.forEach(function (value) { %>
<% if(topics <= 2) { %>
<ul class="p-mainTopics__item">
<li class="p-mainTopics__item--link">
<img src="<%= img %><%= value.icon %> " width="50px">
<div class="p-mainTopics__item--inner">
<a href="/" class="p-mainTopics__item--text"><%= value.text %></a>
<img src="<%= img %><%= value.new %> " width="50px">
</div>
<img src="<%= img %><%= value.arrow %> " height="30px" width="30px">
</li>
</ul>
<% }else{ %>
<ul class="p-mainTopics__item">
<li class="p-mainTopics__item--link">
<img src="<%= img %><%= value.icon %> " width="50px">
<div class="p-mainTopics__item--inner">
<a href="/" class="p-mainTopics__item--text"><%= value.text %></a>
</div>
<img src="<%= img %><%= value.arrow %> " height="30px" width="30px">
</li>
</ul>
<% } %>
<% }) %>

[harigoE8]

こんな感じでしょうか？
これでうまくいかないのですが
ifを使って設定した方がいいのすかね？