devric devric - 1 month ago 8
CSS Question

css rotate a pseudo :after or :before content:""

anyway to make a rotation work on the pseudo

content:"\24B6"?


I'm trying to rotate a unicode symbol.

Answer

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;
  -webkit-transform: rotate(30deg);
  -moz-transform: rotate(30deg);
  -o-transform: rotate(30deg);
  -ms-transform: rotate(30deg);
  transform: rotate(30deg);
}​

http://jsfiddle.net/m3kqN/

Comments