css는 의사를 회전시킨다 : : after 또는 : before content :“”


159

어쨌든 의사에 대한 회전 작업을

content:"\24B6"? 

유니 코드 기호를 회전하려고합니다.


의사 요소를 한 번만 회전 시키거나 (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 2018 년
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.