CSS：：focus：之前不起作用[重复]

Question

我在 Sidemenu 中有一个 Slidemenu，当我单击文本标签时，会显示一些内容。 :before 文本标签，我有一些箭头，我想在点击时旋转 90 度。

代码：

li.textClass:focus:before {
  transform: rotate(90deg) !important;
}

如果我将:focus 更改为:active，它会一直工作，直到我释放鼠标左键，但它应该保持旋转......我该如何解决这个问题？我无法让它工作。

Answer 1

您能否提供更多关于您正在尝试做的事情的细节？也许是您的 html 块的示例？

对于li 元素，您不应该使用焦点（这对于输入和文本区域会更好）- 我会使用悬停。

查看此小提琴中的完整示例： https://jsfiddle.net/wexwnc9b/

HTML：

    <ul>
      <li class="textClass">TextClass</li>
    </ul>

CSS：

    li.textClass {
      position: relative;
      list-style: none;
      padding: 0 30px;
    }

    li.textClass::before {
      content: 'X';
      position: absolute;
      top: 0;
      left: 0;
    }

    li.textClass:hover::before {
      transform: rotate(90deg);
    }