html – 如何在伪元素中旋转文本？

概述我正在尝试使用css变换值旋转(90度)为屏幕顶部的选项卡旋转双角括号设置作为内容：after伪元素.这是相关的代码： .header { -moz-transition: top .5s ease; -webkit-transition: top .5s ease; -o-transition: top .5s ease; transition: top .5s ease; 我正在尝试使用CSS变换值旋转(90度)为屏幕顶部的选项卡旋转双角括号设置作为内容：after伪元素.这是相关的代码：

.header {  -moz-Transition: top .5s ease;  -webkit-Transition: top .5s ease;  -o-Transition: top .5s ease;  Transition: top .5s ease;  position: absolute;  left: 0;  right: 0;  top: -60px;  height: 80px;  background-color: #2d2;}.header.in-top {  top: 0;}.header-tab {  position: absolute;  bottom: 0;  wIDth: 100%;  height: 20px;  text-align: center;  color: #000;  -moz-Transition: color .5s ease;  -webkit-Transition: color .5s ease;  -o-Transition: color .5s ease;  Transition: color .5s ease;}.header-tab:hover {  color: #e22;}.header-arrow:after {  Font-size: 20px;  line-height: 1;  -moz-transform: rotate(90deg);  -webkit-transform: rotate(90deg);  -ms-transform: rotate(90deg);  -o-transform: rotate(90deg);  transform: rotate(90deg);}.header .header-arrow:after {  content: "
<div >  <div  data-toggle="in-top">    <span ></span>  </div></div>
bb";}.header.in-top .header-arrow:after {  content: "ab";}

数据切换属性在JavaScript中用于切换顶级类,以便切换双尖括号的方向,以及通过将其降低来暴露标题的内容.我指定的转换属性似乎没有做任何事情.有解决方案吗

解决方法 在伪元素上使用display：inline-block.或者,内联表或块也应该工作.

见jsFiddle.

默认情况下,您的伪元素以内联方式显示,这使其成为不可转换的元素.从CSS Transforms Working Draft specification开始：

transformable element

A transformable element is an element in one of these categorIEs: an element whose layout is governed by the CSS Box model which is either a block-level or atomic inline-level element,or whose ‘display’ property computes to ‘table-row’,‘table-row-group’,‘table-header-group’,‘table-footer-group’,‘table-cell’,or ‘table-caption’

总结

以上是内存溢出为你收集整理的html – 如何在伪元素中旋转文本？全部内容，希望文章能够帮你解决html – 如何在伪元素中旋转文本？所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。