在CSS中，可以使用偽元素來(lái)創(chuàng)建位置圖標(biāo)，偽元素允許我們創(chuàng)建不在HTML文檔樹(shù)中的元素，并且可以在元素的內(nèi)容前后插入裝飾性的內(nèi)容。

我們需要?jiǎng)?chuàng)建一個(gè)包含位置信息的數(shù)組，

var positions = ['top', 'right', 'bottom', 'left'];

我們可以使用偽元素和CSS的@for規(guī)則來(lái)創(chuàng)建位置圖標(biāo)，以下是一個(gè)示例：

.position-icon {
  position: relative;
}
.position-icon::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: #f00;
}
@for i from 1 to 4 {
  .position-icon[data-position~=#{positions[i]}]::before {
    top: #{positions[i]} == 'top' ? 0 : -100%;
    right: #{positions[i]} == 'right' ? 0 : -100%;
    bottom: #{positions[i]} == 'bottom' ? 0 : -100%;
    left: #{positions[i]} == 'left' ? 0 : -100%;
  }
}

在這個(gè)示例中，我們創(chuàng)建了一個(gè)名為.position-icon的類，用于標(biāo)記需要位置圖標(biāo)的元素，我們使用偽元素::before來(lái)創(chuàng)建位置圖標(biāo)，并使用@for規(guī)則根據(jù)位置數(shù)組動(dòng)態(tài)生成不同位置圖標(biāo)的樣式。

在HTML中，我們可以這樣使用：

<div class="position-icon" data-position="top"></div>
<div class="position-icon" data-position="right"></div>
<div class="position-icon" data-position="bottom"></div>
<div class="position-icon" data-position="left"></div>

這樣，每個(gè)div元素就會(huì)根據(jù)data-position屬性的值顯示不同位置的位置圖標(biāo)了。