CSSは擬似を回転させる：後か：コンテンツの前に：「」

Question

とにかく疑似

content:"\24B6"? 

に回転動作させるために、私はUnicodeのシンボルを回転させるようにしようとしています。

Answer 1

インライン要素が変形することができない、と擬似要素は、デフォルトでは、インラインなので、あなたはそれらを変換するためにdisplay: blockまたはdisplay: inline-blockを適用する必要があります。

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

Answer 2

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

あなたがチェックすることができますこのコード。あなたが簡単に理解できることを願っています。