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

css rotation pseudo-element
devric picture devric · Mar 20, 2012 · Viewed 101.4k times · Source

anyway to make a rotation work on the pseudo 

content:"\24B6"?

I'm trying to rotate a unicode symbol.

Answer

methodofaction picture methodofaction · Mar 20, 2012

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);
}
<div id="whatever">Some text </div>

Related questions

CSS3 Rotate Animation

<img class="image" src="" alt="" width="120" height="120"> Cannot get this animated image to work, it is supposed to do a 360 degrees rotation. I guess something's wrong with the CSS below, as it just stays still. .image { float: left; …

Read More
CSS rotation cross browser with jquery.animate()

I'm working on creating a cross-browser compatible rotation (ie9+) and I have the following code in a jsfiddle $(document).ready(function () { DoRotate(30); AnimateRotate(30); }); function DoRotate(d) { $("#MyDiv1").css({ '-moz-transform':'rotate('+d+'deg)', '-webkit-transform':'rotate('+d+'deg)', …

Read More
CSS3 transition on click using pure CSS

I'm trying to get an image (a plus symbol) to rotate 45 degrees to create a cross symbol. I have so far managed to achieve this using the code below but its working on hover, I wanted to have it rotate …

Read More