css rotar un pseudo: después o: antes del contenido: ""

159

de todos modos para hacer que una rotación funcione en el pseudo

content:"\24B6"? 

Estoy tratando de rotar un símbolo Unicode.

devric
fuente
¿Está tratando de rotar el pseudo-elemento una vez (30 grados), o rotarlo infinitamente? No especificó
RealMJDev

Respuestas:

358

Los elementos en línea no se pueden transformar, y los pseudo elementos están en línea de forma predeterminada, por lo que debe aplicarlos display: blocko display: inline-blocktransformarlos:

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

método de acción
fuente
-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%);
}

Puedes consultar este código. Espero que lo entiendas fácilmente.

saddamwp
fuente
1
En realidad no lo entiendo fácilmente :) Una respuesta útil explicaría lo que hace el código y cómo es diferente de la respuesta aceptada. También sería un fragmento ejecutable, como la respuesta aceptada.
Dan Dascalescu