css ruota uno pseudo: after or: before content: “”


159

comunque per far funzionare una rotazione sullo pseudo

content:"\24B6"? 

Sto cercando di ruotare un simbolo unicode.


Stai cercando di ruotare lo pseudo-elemento una volta spento (30 gradi) o di ruotarlo all'infinito? Non specificato
RealMJDev il

Risposte:


358

Gli elementi in linea non possono essere trasformati e gli pseudo elementi sono in linea per impostazione predefinita, quindi è necessario applicare display: blocko display: inline-blocktrasformarli:

#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%);
}

puoi controllare questo codice. spero che capirai facilmente.


1
In realtà non capisco facilmente :) Una risposta utile spiegherebbe cosa fa il codice e come è diverso dalla risposta accettata. Sarebbe anche uno snippet eseguibile, come la risposta accettata.
Dan Dascalescu,
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.