css faire pivoter un pseudo: après ou: avant le contenu: ""

159

en tout cas pour faire fonctionner une rotation sur le pseudo 

content:"\24B6"?

J'essaye de faire pivoter un symbole Unicode.

css rotation pseudo-element devric
la source
Essayez-vous de faire pivoter le pseudo-élément une fois (30 degrés) ou de le faire tourner à l'infini? N'a pas précisé.
RealMJDev

Réponses:

358

Les éléments en ligne ne peuvent pas être transformés et les pseudo éléments sont en ligne par défaut, vous devez donc les appliquer display: blockou display: inline-blockles transformer:

#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>
Développer l'extrait

méthode d'action
la source
-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%);
}

vous pouvez vérifier ce code. j'espère que vous comprendrez facilement.

saddamwp
la source
1
En fait, je ne comprends pas facilement :) Une réponse utile expliquerait ce que fait le code et en quoi il diffère de la réponse acceptée. Ce serait également un extrait de code exécutable, comme la réponse acceptée.
Dan Dascalescu