html - 使用 `display:inline block` 在同一行显示 anchor 标记和箭头(使用边框)

Question

这是在同一行中显示文本和箭头(使用边框)的示例 html。

.wrap {
  display: inline-block;
}
li {
  list-style: none;
}
.tomsAccLeftPaneArrow {
  position: relative;
  width: 6px;
  height: 6px;
  border: 2px solid;
  border-color: #979492;
  -ms-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  border-left: 0;
  border-bottom: 0;
}

<ul class="tomsTabs tomsSideNav">
  <li id="track_tab">
    <div class="wrap">
      <a href="#track" aria-label="Show track ">TOP QUESTIONS
        	<div class="tomsAccLeftPaneArrow">&nbsp;</div></a>

    </div>
  </li>
</ul>

如何使用 display:inline block 在同一行中显示 anchor 标记和箭头(“tomsAccLeftPaneArrow”)？ 谁能给我一个解决方案。

Answer 1

使用伪对象并将箭头绝对定位在 anchor 旁边。

.wrap {
  display: inline-block;
}
li {
  list-style: none;
}
a {
  position: relative;
}
a:after {
  content: '';
  position: absolute;
  width: 6px;
  height: 6px;
  border: 2px solid;
  border-color: #979492;
  -ms-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  border-left: 0;
  border-bottom: 0;
  margin-top: 5px;
  margin-left: 5px;
}

<ul class="tomsTabs tomsSideNav">
  <li id="track_tab">
    <div class="wrap">
      <a href="#track" aria-label="Show track ">TOP QUESTIONS</a>

    </div>
  </li>
</ul>

实际操作:https://jsfiddle.net/wfwo6mb2/