201

anyway to make a rotation work on the pseudo 

content:"\24B6"?

I'm trying to rotate a unicode symbol.

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
devric
  • 3,555
  • 4
  • 22
  • 36

2 Answers2

451

Inline elements can't be transformed, and pseudo elements are inline by default, so you must apply display: block or display: inline-block to transform them:

#whatever:after {
  content: "\24B6";
  display: inline-block;
  transform: rotate(30deg);
}
<div id="whatever">Some text </div>
methodofaction
  • 70,885
  • 21
  • 151
  • 164
  • 1
    This anwser is heaps better than the ones found in the linked duplicate. Those have lots of info on _why_ rotating the pseudo does not work by default, but offer zero solutions. This answer here, explains why and also how to fix it. – walen May 31 '23 at 17:17
1
.process-list:after{
    content: "\2191";
    position: absolute;
    top:50%;
    right:-8px;
    background-color: #ea1f41;
    width:35px;
    height: 35px;
    border:2px solid #ffffff;
    border-radius: 5px;
    color: #ffffff;
    z-index: 10000;
    -webkit-transform: rotate(50deg) translateY(-50%);
    -moz-transform: rotate(50deg) translateY(-50%);
    -ms-transform: rotate(50deg) translateY(-50%);
    -o-transform: rotate(50deg) translateY(-50%);
    transform: rotate(50deg) translateY(-50%);
}

you can check this code . i hope you will easily understand.

saddamwp
  • 29
  • 3
  • 4
    Actually I don't easily understand :) A useful answer would explain what the code does, and how it's different from the accepted answer. It would also be a runnable snippet, like the accepted answer. – Dan Dascalescu Jun 17 '19 at 09:17