css下拉框图标不显示

最近在做一个网站，其中有一个下拉框，但是遇到了一个问题：下拉框的图标不显示出来了。经过一番查找和试验，发现其实是CSS的问题。
首先，我们来看看下拉框的HTML代码：

<div class="dropdown">
   <button class="btn-selector">选择</button>
   <ul class="dropdown-list">
       <li>选项 1</li>
       <li>选项 2</li>
       <li>选项 3</li>
   </ul>
</div>

可以看到，在这里我用了一个div包含着一个button和一个ul，button是下拉框的文字，ul里面是下拉框的选项。
然后，我用了以下的CSS来设置样式：

.dropdown {
   position: relative;
   display: inline-block;
}
.btn-selector {
   border: 1px solid #ccc;
   background-color: #fff;
   padding: 8px 15px;
   font-size: 14px;
   cursor: pointer;
}
.dropdown-list {
   position: absolute;
   display: none;
   list-style: none;
   margin: 0;
   padding: 0;
   background-color: #fff;
   border: 1px solid #ccc;
   border-top: none;
}
.dropdown-list li {
   padding: 8px 15px;
   font-size: 14px;
   cursor: pointer;
   border-top: 1px solid #ccc;
}
.dropdown-list li:hover {
   background-color: #f4f4f4;
}

这段CSS设置的是下拉框的样式，其中使用了position属性和display属性来实现下拉效果。但是，却出现了图标不显示的问题。
经过检查，发现下拉框图标是使用:before伪元素来实现的，代码如下：

.btn-selector:before {
   content: "25BC";
   position: absolute;
   top: 50%;
   right: 15px;
   transform: translateY(-50%);
   font-size: 12px;
}

可以看到，这里的:before代码是设置下拉框图标的样式。但是，在运行的时候，发现图标不显示出来了。
经过一番排查，终于发现这个问题的原因：由于使用了position和display属性来实现下拉效果，在这种情况下，使用伪元素前缀:before是无法正常工作的。因为:before伪元素只有在元素的position属性被设置为非static时，才能正常工作。
解决这个问题的方法很简单：只需要在.btn-selector里面添加一个position:relative属性就可以了。这样，在之后运行时，图标就会正常的显示出来了。

综上所述，如果遇到下拉框图标不显示的问题，可能是由于使用了position和display等属性所导致的，在这种情况下，只需要加上相应的属性就可以解决问题。