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
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

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
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
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