变换旋转后列表项中的未计入空格

Question

我在列表中有一个变换，效果后似乎有空格。由于该项目是内联的，我认为这是原因。

那就是说，我正在寻找一个解决方案 - 将这个词返回到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>

Answer 1

您的span继承了.sidebar-nav li的文字缩进（Stylish-portfolio.css第63行）。修复它：

CSS

.hybrid {   
    text-indent: 0;
}