How to rotate text in a pseudo-element?

Question

I am trying to rotate a double angle bracket given as content in a pseudo-element :after using the transform css rotate(90deg) value for the tab at the top of the screen. Here is 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 switch the in-top class to switch the direction of the double angle bracket, and also to display the contents of the header by omitting it. The transform properties I specified seem to do nothing. Any solutions?

Answer 1

Use display: inline-block for a pseudo-element. Alternatively, an inline-table or block should also work.

See jsFiddle .

By default, your pseudo-element is displayed inline , which makes it an untranslatable element. From CSS Transforms Working draft specification :

convertible item

The element to be converted is an element in one of these categories: an element whose layout is determined by the CSS window model, which is either a block or atomic element of a linear level, or whose "display property" evaluates to "table-row", "table-row-group" , "table-header-group", 'table-footer-group,' table-cell or table-caption

Answer 2

You need to set the pseudo-element as an element of a block or inline block:

 .header-arrow:after { display: block; } 

The specification says that rotation should work on inline elements, but it doesn’t work on WebKit-based browsers: https://www.webkit.org/blog/130/css-transforms/

Answer 3

The rotate property will be applied to the pseudo-element (after / before) only when you use display:inline-block; or display:inline-block; property in your class or selector.

 .className:before{ -webkit-transform: rotateZ(180deg); /* Safari */ transform: rotateZ(180deg); /* Standard syntax */ display: inline-block; }