Geek asks and answers

Conversion: before or: after an element

Is there a way to apply the transform to an element inserted with: before?

The following does not work, but I am open to other solutions.

.itemclass:before  {
  content: "➨";
  transform: rotate(30deg);
  -ms-transform: rotate(30deg); /* IE 9 */
  -webkit-transform: rotate(30deg); /* Safari and Chrome */
}
+5
source share
1 answer

Conversions cannot be applied to non-replaceable elements inline. Add:

display:inline-block;

Demo

Note. Although this does not apply to this use case, positioning absolute/ fixeddiscards the need for a property display, as they are automatically processed as display:block.

Also check the definition of the transformable element :

- HTML, block-level, display <table-row, 'table-row-group,' table-header-group, 'table-footer-group,' table-cell 'table-caption; SVG (. [SVG11]), transform, 'patternTransform ' gradientTransform.

+10

More articles:


All Articles