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.


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>


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


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
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.