css putar pseudo: after atau: before content: ""

159

lagi pula untuk membuat rotasi bekerja pada semu

content:"\24B6"?

Saya mencoba memutar simbol unicode.

css rotation pseudo-element

— devric
sumber

Apakah Anda mencoba memutar elemen pseudo sekali-off (30deg), atau memutarnya secara tak terbatas? Tidak menentukan.

— RealMJDev

Jawaban:

358

Elemen sebaris tidak dapat diubah, dan elemen pseudo sebaris secara default, jadi Anda harus menerapkan display: blockatau display: inline-blockmengubahnya:

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

Luaskan cuplikan

— metode tindakan
sumber

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

Anda dapat memeriksa kode ini. saya harap Anda akan dengan mudah mengerti.

— saddamwp
sumber

Sebenarnya saya tidak mudah mengerti :) Jawaban yang berguna akan menjelaskan apa yang dilakukan kode, dan bagaimana perbedaannya dari jawaban yang diterima. Itu juga akan menjadi potongan runnable, seperti jawaban yang diterima.

— Dan Dascalescu

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.

Licensed under cc by-sa 3.0 with attribution required.