使用bootstrap内置的图片做transition过渡出现莫名横线

css代码是这样的

.sy-liebiao ul li a{
	display: block;
	color: #B4B2B2;
	text-decoration: none;
	transition:transform 1.5s;	
}

.sy-liebiao ul li a:hover{
	text-decoration: none;
	color: #1B3E5C;
	transform: translateX(20px);
}

html代码是这样的

        <div class="col-md-2 column sy-liebiao">
        <div class="top-biaoti"><h3><strong>模板案例</strong></h3></div>
          <ul>
            <li>
              <a href="#">
              <i class="glyphicon glyphicon-ok-sign"> </i>
              企业模板相关案例</a>
            </li>
            <li>
              <a href="#">
              <i class="glyphicon glyphicon-ok-sign"> </i>
              个人网站模板相关案例</a>
            </li>
          </div>
        </div>

一条莫名的横线 用英文字符就没有这个现象!