CSS Rotate a Pseudo :After or :Before Content:""

#whatever:after {
  content: "\24B6";
  display: inline-block;
  transform: rotate(30deg);
}

<div id="whatever">Some text </div>

whet CSS pseudo element is not rotating

set display inline-block.

.span1::before{
   content: "\25B6";
   color: black;
   display: inline-block;
}

How to Rotate :before pseudo element when parent is hovered

Try this out:

a:before {
    -webkit-transition: all 300ms 0s ease-in-out;
    transition: all 300ms 0s ease-in-out;

    content: "\f015";
    display: inline-block; //as @Rohit Azad suggested
    font-family: FontAwesome;

    // .. etc ..
}

a:hover:before {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
}

Have a look at this fiddle.

How to rotate pseudo element css

transform-origin works fine, it's just that

a) 50% 50% (the object's center) is the default, and

b) you have to center the content of the box. That's a bit tricky because the icon you use doesn't require the full line height. Try adding

::before, ::after {
  padding-bottom: .17em;
}

css transform doesn't work on css generated content for ::after, ::before elements

I got a bit curious about this myself, so I looked a bit further into it. Turns out, it does work.

After looking at the test case: pseudo-transition.html

I noticed the pseudo element had a style of: display: block.

Changing your fiddle to use display: inline-block and voila!

Fiddle

And with an onLoad transition:

Transition Fiddle

New Style:

a:after { display: inline-block; content: ' ⇧'; -webkit-transform: rotate(180deg); }

CSS get the before pseudo element to appear below the actual element

The problem is with the transform properties. It will not go well with position items. Have a look at below fiddle without transform.

http://jsfiddle.net/kiranvarthi/6wsyqrwx/7/

div {
      height: 224px;
      width: 294px;
      border:7px solid #FFF;
      box-shadow: 2px 2px 5px;
      margin:50px;
      z-index:auto;
      background:red;
      position: relative;
    }

div::before {
      height: 224px;
      width: 294px;
      border:7px solid #FFF;
      box-shadow: 2px 2px 5px;
      background:blue;
      display:block;
      content:'bottom';
      z-index:-1;
      position:absolute;
    }

Responsive CSS transform for before pseudo-element

Your current solution is responsive about different screen sizes, but it isn't about different h1 lengths. A longer text will need a different position.

You can solve it make the width of h1 adjust to its content. And now, just position the pseudo on the upper left, center it with a translation and rotate it.

h1::before {  font-size: 0.7rem;  content: 'Introducing';  position: absolute;  top: -1em;  transform: translateX(-50%) rotate(-45deg);}
h1 {  text-align: center;  position: relative;  margin: 30px auto;  width: fit-content;  background-color: cadetblue;}

<h1>  Hello</h1><h1>  Hello World</h1>

<ul class="inline-block">
  <li class="inline-block after:inline-block after:pseudo-content-comma after:mr-1">Item 1</li>
  <li class="inline-block after:inline-block after:pseudo-content-comma after:mr-1">Item 2</li>
  <li class="inline-block after:inline-block after:pseudo-content-oxford-ampersand after:mr-1">Item 3</li>
  <li class="inline-block">Item 4</li>
</ul>

section {
  display: flex;
  background-color: blue;
}

.wrapper-section {
  display: flex;
}

.section-sum {
  height: 100%;
  display: flex;
  flex-flow: column nowrap;
}

.vt-line {
  height: 100%;
  width: 2px;
  background-color: #262525;
  margin: 0 auto;
}

.num p {
  display: inline-block;
  align-items: center;
  font-size: 5em;
  font-weight: bold;
  margin: 0;
  transform: rotate(-90deg);
}

.wrapper-aboutinfo {
  display: flex;
  align-items: center;
}

.container-aboutimg img {
  display: block;
  max-width: 100%;
  margin: 0 auto;
}

 <section id="about">
  <div class="wrapper-section">
    <div class="section-sum">
      <div class="vt-line"></div>
      <div class="num">
        <p>01</p>
      </div>
    </div>
    <div class="wrapper-aboutinfo">
      <div class="container-aboutimg">
        <img src="https://images.pexels.com/photos/3861964/pexels-photo-3861964.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260">
      </div>
      <div class="info-about">
        <h2>Lorem Ipsum</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam volutpat pretium pharetra. Aliquam non ultrices neque. Praesent rhoncus sapien vitae sem ultrices, ut malesuada magna consequat. Mauris eu laoreet justo. Integer tristique porta nibh vitae ultrices. Praesent porta ligula ut nisl pellentesque congue. Sed finibus ut est et lobortis. Pellentesque velit magna, sagittis non lorem at, pulvinar tempor sem. Nam iaculis nisi nec elit efficitur, non varius sapien feugiat.
        <br>
        <br>
Morbi justo arcu, rhoncus non sagittis eu, faucibus id ipsum. Vivamus augue lectus, venenatis a commodo eget, ullamcorper vel lorem. Vivamus posuere sagittis eros et consectetur. In feugiat gravida lectus sed pulvinar. Etiam dapibus luctus magna, fermentum dapibus mauris vulputate in. Aliquam at massa erat. In tincidunt dictum risus, vel eleifend sem tempor id. </p>
      </div>
    </div>
  </div>
</section>