css gire um pseudo: depois ou: antes do conteúdo: “”


159

de qualquer maneira, para fazer uma rotação funcionar no pseudo

content:"\24B6"? 

Estou tentando girar um símbolo unicode.


Você está tentando girar o pseudo-elemento uma vez (30deg) ou girá-lo infinitamente? Não especifiquei.
RealMJDev 26/09/19

Respostas:


358

Os elementos embutidos não podem ser transformados e os pseudoelementos estão embutidos por padrão, portanto, você deve aplicar display: blockou display: inline-blocktransformá-los:

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

você pode verificar este código. Espero que você entenda facilmente.


1
Na verdade, eu não entendo facilmente :) Uma resposta útil explicaria o que o código faz e como é diferente da resposta aceita. Também seria um trecho executável, como a resposta aceita.
Dan Dascalescu 17/06/19
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.