Rotating elements in a link

Question

    a{
                            border: 1px solid black;
                            transform: rotate(65deg);
                        }

    <div class="caption__link">
        <a href="#">hello</a>
    </div>

I am trying to make what is in the link rotate but its not working, I used a font-awesome icon originally but turns out it doesn't work with texts too

Answer 1

Elements with a display property of inline cannot be transformed like this.

As it's a text link (which is inline by default) you can add display: inline-block; to enable this.

a {
  border: 1px solid black;
  transform: rotate(65deg);
  display: inline-block;
}

<div class="caption__link">
  <a href="#">hello</a>
</div>