cssは疑似：afterまたは：before content：“”を回転します

159

とにかく、擬似で回転を機能させる

content:"\24B6"?

Unicodeシンボルを回転させようとしています。

css rotation pseudo-element

— devric
ソース

疑似要素を一度オフ（30度）に回転させようとしていますか、それとも無限に回転させようとしていますか？指定しませんでした。

— RealMJDev

358

インライン要素は変換できません。疑似要素はデフォルトでインラインなので、適用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>

スニペットを展開

— アクションの方法
ソース

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

このコードを確認できます。簡単にご理解いただければ幸いです。

— サダムプ
ソース

1

実際、私は簡単に理解できません:)役に立つ答えは、コードが何をするか、そしてそれが受け入れられた答えとどのように異なるかを説明するでしょう。また、受け入れられた回答のように、実行可能なスニペットになります。

— Dan Dascalescu