W3C home > Mailing lists > Public > www-style@w3.org > April 2013

Re: [[css-transforms]] Transforms on pseudo classes

From: Anselm Hannemann <info@anselm-hannemann.com>
Date: Wed, 17 Apr 2013 14:37:13 +0200
To: Hannes Papenberg <hannes@mypapenberg.de>
Cc: www-style@w3.org
Message-ID: <30D2DF96345E459DBCD9F77330AB6272@anselm-hannemann.com>

this is an 'author'-level problem. You have to set your pseudo-element to 

display: block;

so that the pseudo element is a transformable element (http://www.w3.org/TR/css3-transforms/#transformable-element).
With that it works in Safari, Chrome + Firefox, too. Opera differs here and transforms even if it is not set.

Anselm Hannemann

On Tuesday, 9. April 2013 at 14:57, Hannes Papenberg wrote:

> Hi to the list,
> I've done a little bit of testing and I guess I found a little hole in
> the transform specs. My specific use case is the following: I have a
> menu made out of a list and one of the menu items has been added. I want
> to mark that item with a little "new" tag in the upper left corner. That
> tag should have a orange background, white border, black shadow, rounded
> corners and (the important part) it should be rotated by maybe 30
> degree. At the time that I needed this feature, I used an image and
> absolute-positioned it in the right position.
> Now I was thinking that you could achieve basically the same thing with
> the :before pseudo class:
> ..menu li a:before {
> background: orange;
> border: 1px solid white;
> border-radius:5px;
> box-shadow: 0 0 1px 1px #888888;
> color: white;
> content: "New";
> padding: 3px;
> transform: rotate(30deg);
> }
> However, while everything else works great on the :before, the transform
> does not. Neither Firefox 20, nor Chrome 26 rotate the content injected
> with :before. Shouldn't transforms also apply to :before? I couldn't
> find anything regarding this in the specs... Is this an oversight in the
> specs or a missing test or a missing implementation from the browser
> vendors or am I interpreting this wrong?
> Thanks for your consideration,
> Hannes Papenberg 
Received on Wednesday, 17 April 2013 12:37:43 UTC

This archive was generated by hypermail 2.4.0 : Friday, 25 March 2022 10:08:28 UTC