html - 转换旋转后列表项中的未占空间

我在列表中进行了转换，效果之后似乎还有空格。由于该项目是内联的，因此我认为这是原因。

就是说，我正在寻找一种解决方案-将单词无杂音地返回HYBRID。

视觉的

的CSS

.hybrid {
    display:inline-block;
    transform:rotate(180deg);
}

.sidebar-nav li {
  line-height: 40px;
  text-indent: 20px;
}

.sidebar-nav li a {
  color: #999999;
  display: block;
  text-decoration: none;
}

html

<li>
    <a href="#overview">Overview of H<span class="hybrid">Y</span>BRID</a>
</li>

最佳答案

您的span继承了.sidebar-nav li的文本缩进（stylish-portfolio.css的第63行）。使用以下方法修复：

的CSS

.hybrid {
    text-indent: 0;
}