Mirror the first letter of a text with CSS

Question

I searched a lot for a way to do what I want but I only found ways that I can't use.

The problem is: I want to mirror ONLY the first letter of a Wordpress Site Title.

I have this Css:

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

and I have added this 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 is used here:

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

A second problem is that I CANNOT edit this line, the only thing I can do is work with the css (I tried also to type a >span> in the Title editor of WordPress without success.

The CSS actually is doing ONLY the scale of the letter, from 60px to 80px, but nothing is mirrored.

I am blocked and need a tip

Answer 1

According to MDN's docs on ::first-letter, you can't:

Only a small subset of all CSS properties can be used inside a declaration block of a CSS ruleset containing a selector using the ::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 and font-family.

All background properties : background-color, background-image, background-clip, background-origin, background-position, background-repeat, background-size, background-attachment, and 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: the shorthands border, border-style, border-color, border-width, border- radius, border-image, and the longhands properties.

The color property.

The 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 is none) CSS properties.

EDIT

As an alternative, since you cannot change the HTML, you could turn the first letter into a real element, with some javascript:

JsFiddle Example

var title = document.querySelector('.site-title');
var fletter = title.innerHTML.charAt(0);
title.innerHTML = title.innerHTML.replace(fletter, '<span>'+fletter+'</span>');

Answer 2

Only a small subset of all CSS properties can be used inside a declaration block of a CSS ruleset containing a selector using the ::first-letter pseudo-element. transform isn't currently one of them.

Read more in the Mozilla Developer Docs.

Since you're using WordPress, you can always hook into 'the_title', and prepend a <span> to the title. Something like:

function prepend_title( $title, $id = null ) {
    if ( is_front_page() ) {
        return '<span class="first-letter">' . substr($title, 0, 1) . '</span>' . $title;
    } else { return $title; }
}
add_filter( 'the_title', 'prepend_title', 10, 2 );

This will make the_title() return the title, along with a duplicate first letter wrapped in a <span>.