0

I have a Slidemenu within a Sidemenu, when i'm clicking on a text label, some content shows up. :before the text label, i'm having some Arrows, that i want to rotate 90deg, when clicked.

Code:

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

if i change :focus to :active it works untill i release the left mouse button, but it should stay rotated.... how do i fix this? i can't get it to work.

David
  • 1,084
  • 12
  • 36

1 Answers1

0

Can you provide a little more detail of what you are trying to do? Maybe an example of your html block?

For an li element, you should not use focus (that would be better for inputs & textareas) - I would use hover.

See full example in this fiddle: 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);
    }
Markie
  • 131
  • 4
  • well its basically what you've done here. but i want the arrow to stay rotated, not only on `:hover` or on `:active` – David Nov 14 '17 at 16:16