css3 - Mirror the first letter of a text with CSS -

css3 - Mirror the first letter of a text with CSS -

i searched lot way want found ways can't use.

the problem is: want mirror first letter of wordpress site title.

i have css:

.site-title { font-family: fontlogo; font-size: 60px; font-weight: bold; line-height: 1; margin: 0; padding: 58px 0 10px; }

and have added piece:

.site-title::first-letter { font-size: 80px; -moz-transform: scale(-1, 1); -webkit-transform: scale(-1, 1); -o-transform: scale(-1, 1); -ms-transform: scale(-1, 1); transform: scale(-1, 1); }

the class used here:

<h1 class="site-title">thetitle</h1>

a sec problem cannot edit line, thing can work css (i tried type >span> in title editor of wordpress without success.

the css doing scale of letter, 60px 80px, nil mirrored.

i blocked , need tip

according mdn's docs on ::first-letter, can't:

only little subset of css properties can used within declaration block of css ruleset containing selector using ::first-letter pseudo-element: all font properties : font, font-style, font-feature-settings, font-kerning, font-language-override, font-stretch, font-synthesis, font-variant, font-variant-alternates, font-variant-caps, font-variant-east-asian, font-variant-ligatures, font-variant-numeric, font-variant-position, font-weight, font-size, font-size-adjust, line-height , font-family. all background properties : background-color, background-image, background-clip, background-origin, background-position, background-repeat, background-size, background-attachment, , background-blend-mode. all margin properties: margin, margin-top, margin-right, margin-bottom, margin-left. all padding properties: padding, padding-top, padding-right, padding-bottom, padding-left. all border properties: shorthands border, border-style, border-color, border-width, border- radius, border-image, , longhands properties. the color property. text-decoration, text-shadow, text-transform, letter-spacing, word-spacing (when appropriate), line-height, text-decoration-color, text-decoration-line, text-decoration-style, box-shadow, float, vertical-align (only if float none) css properties.

edit

as alternative, since cannot alter html, turn first letter real element, javascript:

jsfiddle example

var title = document.queryselector('.site-title'); var fletter = title.innerhtml.charat(0); title.innerhtml = title.innerhtml.replace(fletter, '<span>'+fletter+'</span>');

css css3 mirror