[英]How to rotate text in pseudo-element?
I'm trying to rotate the double angle bracket set as the content in an :after
pseudo-element using the css transform
value rotate(90deg)
for a tab across the top of the screen. 我正在尝试使用css transform
值rotate(90deg)
为屏幕顶部的选项卡旋转双角括号设置作为内容:after
伪元素。 Here's the relevant code: 这是相关的代码:
.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: "\\00bb"; } .header.in-top .header-arrow:after { content: "\\00ab"; }
<div class="header"> <div class="header-tab" data-toggle="in-top"> <span class="header-arrow"></span> </div> </div>
The data-toggle
attribute is used in JavaScript to toggle the in-top
class in order to switch the direction of the double angle bracket as well as to expose the content of the header by bringing it down. data-toggle
属性在JavaScript中用于切换in-top
类,以便切换双尖括号的方向,以及通过将其降低来暴露标题的内容。 The transform
properties I have specified seem to do nothing though. 我指定的transform
属性似乎没有做任何事情。 Any solutions? 有解决方案吗
Use display: inline-block
on the pseudo-element. 在伪元素上使用display: inline-block
。 Alternatively, inline-table
or block
should also work. 或者, inline-table
或block
也应该工作。
Your pseudo-element is displayed inline
by default, which makes it a nontransformable element. 默认情况下,您的伪元素以内inline
方式显示,这使其成为不可转换的元素。 From the CSS Transforms Working Draft specification : 来自CSS Transforms Working Draft规范 :
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' 可转换元素是以下类别之一中的元素:布局由CSS框模型控制的元素,该框模型是块级或原子内联级元素,或者其“display”属性计算为“table-row” ,'table-row-group','table-header-group','table-footer-group','table-cell'或'table-caption'
You need to set the pseudo-element as a block or inline-block element: 您需要将伪元素设置为块或内联块元素:
.header-arrow:after {
display: block;
}
The specification says rotation should work on inline elements, but in WebKit based browsers it doesn't works: https://www.webkit.org/blog/130/css-transforms/ 该规范说旋转应该适用于内联元素,但在基于WebKit的浏览器中,它不起作用: https : //www.webkit.org/blog/130/css-transforms/
Rotate property will apply on pseudo-element(after/before) only when you will use display:inline-block;
只有在使用display:inline-block;
Rotate属性才会应用于伪元素(之前/之后) display:inline-block;
or display:inline-block;
或display:inline-block;
property in your class or selector. 您的类或选择器中的属性。
.className:before{
-webkit-transform: rotateZ(180deg); /* Safari */
transform: rotateZ(180deg); /* Standard syntax */
display: inline-block;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.