CSS drehen ein Pseudo: nach oder: vor Inhalt: ""

159

sowieso, um eine Rotation auf dem Pseudo arbeiten zu lassen 

content:"\24B6"?

Ich versuche ein Unicode-Symbol zu drehen.

css rotation pseudo-element devric
quelle
Versuchen Sie, das Pseudoelement einmalig (30 Grad) oder unendlich zu drehen? Nicht angegeben.
RealMJDev

Antworten:

358

Inline-Elemente können nicht transformiert werden, und Pseudo-Elemente sind standardmäßig inline. Sie müssen sie also anwenden display: blockoder display: inline-blocktransformieren:

#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>
Erweitern Sie das Snippet

Methode der Aktion
quelle
-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%);
}

Sie können diesen Code überprüfen. Ich hoffe, Sie werden es leicht verstehen.

saddamwp
quelle
1
Eigentlich verstehe ich das nicht leicht :) Eine nützliche Antwort würde erklären, was der Code tut und wie er sich von der akzeptierten Antwort unterscheidet. Es wäre auch ein lauffähiger Ausschnitt, wie die akzeptierte Antwort.
Dan Dascalescu