Отразить первую букву текста с помощью CSS

Согласно документам MDN на ::first-letter, ты не можешь:

Только небольшое подмножество всех свойств CSS может использоваться внутри блока объявления набора правил CSS, содержащего селектор с использованием псевдоэлемента ::first-letter:

Все свойства шрифта: шрифт, стиль шрифта, настройки параметров шрифта, кернинг шрифта, переопределение языка шрифта, растяжение шрифта, синтез шрифта, вариант шрифта, альтернативный вариант шрифта, шрифт -вариант-заглавные буквы, шрифт-вариант-восточно-азиатский, шрифт-вариант-лигатуры, шрифт-вариант-числовой, шрифт-вариант-позиция, вес шрифта, размер шрифта, настройка размера шрифта, высота строки и шрифт -семья.

Все свойства фона: background-color, background-image, background-clip, background-origin, background-position, background-repeat, background-size, background-attachment и фоновый режим наложения.

Все свойства маржи: маржа, маржа-верхняя, маржа-правая, маржа-нижняя, маржа-левая.

Все свойства отступов: отступы, отступы-сверху, отступы-вправо, отступы-снизу, отступы-влево.

Все свойства границ: сокращенные свойства border, border-style, border-color, border-width, border-radius, border-image и полные свойства.

Свойство color.

Text-decoration, text-shadow, text-transform, letter-spacing, word-spacing (при необходимости) ), line-height, text-decoration-color, text-decoration-line, text-decoration-style, box-shadow, float, vertical-align (только если float не имеет значения) CSS-свойства.

ИЗМЕНИТЬ

В качестве альтернативы, поскольку вы не можете изменить HTML, вы можете превратить первую букву в реальный элемент с помощью некоторого javascript:

Пример JsFiddle

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

Только небольшое подмножество всех свойств CSS может использоваться внутри блока объявления набора правил CSS, содержащего селектор с использованием псевдоэлемента ::first-letter. transform в настоящее время не является одним из них.

Подробнее читайте в Документации для разработчиков Mozilla.

Поскольку вы используете WordPress, вы всегда можете подключиться к 'the_title' и добавить <span> к заголовку. Что-то типа:

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 );

Это заставит the_title() вернуть заголовок вместе с дублирующейся первой буквой, завернутой в <span>.

Это не самый гладкий способ, и он кажется немного хакерским, но я думаю, что это то, что вы ищете.

Я добавил это в CSS, а затем расположил новую букву, используя верхний и левый края.

.site-title:after {
    content: "T";
    position: absolute;
    transform: rotateX(180deg);
}

Codepen здесь: http://codepen.io/supah_frank/pen/dCpmo

Если вы можете сделать контейнер за пределами позиции H1: относительная, это, вероятно, поможет с позиционированием, поскольку новая буква будет ее родственной сестрой.

Я хочу поставить в качестве ответа решение, которое я использую (не окончательно), к сожалению, использование span внутри H1 не очень просто, поэтому я пришел к этому:

.firstletter {
    position:absolute;
    -moz-transform: scale(-1, 1);
    -webkit-transform: scale(-1, 1);
    -o-transform: scale(-1, 1);
    -ms-transform: scale(-1, 1);
    transform: scale(-1, 1);
}
.otherletters {
    position:relative;
    left:58px;
}

это интересная часть CSS, ОБРАТИТЕ ВНИМАНИЕ на «абсолютную» позицию для первой буквы (которая должна быть зеркальной), это необходимо, иначе (НО Я НЕ ЗНАЮ ПОЧЕМУ, если кто знает...) это не будет зеркально После этого мне нужно поставить диапазон с относительным позиционированием. К сожалению, это относительно конца последнего «встроенного» или «относительного» элемента, а не конца нашего «абсолютного» диапазона. По этой причине я перемещаю следующие буквы вправо примерно на 58 пикселей (визуально это выглядит вполне нормально).

<h1 class="site-title">
    <?php 
    $name = get_bloginfo('name','raw');
    echo '<span class="firstletter">' . substr($name, 0, 1) . '</span><span class="otherletters">' . substr($name,1).'</span>'; ?>
</h1>

это PHP заголовка, вы можете увидеть два разных тега span.

Для той же проблемы, с которой я столкнулся, все решения, предложенные моими друзьями LcSalazar, rnevius, просто не будут работать. Код, который я разместил, работает, но мне не нравится, что я должен поставить жестко запрограммированное «58px», которое достигается после нескольких тестов, потому что, если я изменю самую маленькую вещь в css, этот пробел может быть «преобразован» во что-то неправильное.

К настоящему времени я хотел бы иметь возможность рассчитать ширину пролета, чтобы точно расположить второй.