css bir sözde döndürme: sonra veya: içerikten önce: “”

159

yine de sözde bir rotasyon çalışması yapmak için

content:"\24B6"?

Unicode sembolü döndürmeye çalışıyorum.

css rotation pseudo-element

— devric
kaynak

Sözde öğeyi bir defaya mahsus (30 derece) döndürmeye mi yoksa sonsuz miktarda döndürmeye mi çalışıyorsunuz? Belirtmedim.

— RealMJDev

358

Satır içi öğeler dönüştürülemez ve sözde öğeler varsayılan olarak satır içi olduğundan, bunları uygulamanız display: blockveya display: inline-blockdönüştürmeniz gerekir:

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

Snippet'i genişlet

— methodofaction
kaynak

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

bu kodu kontrol edebilirsiniz. Umarım kolayca anlarsın.

— saddamwp
kaynak

1

Aslında kolayca anlamıyorum :) Yararlı bir cevap, kodun ne yaptığını ve kabul edilen cevaptan nasıl farklı olduğunu açıklar. Kabul edilen cevap gibi çalıştırılabilir bir snippet de olacaktır.

— Dan Dascalescu