使用CSS镜像文本的第一个字母

Question

我搜索了很多方法来做我想做的事,但我只找到了一些我无法使用的方法.

问题是:我想只镜像Wordpress网站标题的第一个字母.

我有这个Css:

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

我添加了这篇文章:

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

该类在这里使用:

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

第二个问题是我不能编辑这一行,我唯一能做的就是使用css(我也尝试>span>在WordPress的Title编辑器中键入a 而没有成功.

CSS实际上只是字母的比例,从60px到80px,但没有任何镜像.

我被封锁了,需要小费

Answer 1

根据MDN的文档::first-letter,你不能:

在包含使用:: first-letter伪元素的选择器的CSS规则集的声明块中,只能使用所有CSS属性的一小部分:

所有字体属性: 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.

所有背景属性:背景颜色,背景图像,背景剪辑,背景原点,背景位置,背景重复,背景大小,背景附件和背景混合模式.

所有保证金属性:保证金,保证金头寸,保证金权利,保证金底部,保证金保证金.

所有填充属性:填充,填充顶部,填充右侧,填充底部,填充左侧.

所有边框属性:短边框边框,边框样式,边框颜色,边框宽度,border-radius,border-image和longhands属性.

颜色属性.

文本修饰,文本阴影,文本转换,字母间距,文字间距(适当时),行高,文本装饰颜色,文本装饰行,文本装饰样式,框阴影,float,vertical-align(仅当float为none时)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>');

Answer 2

在包含使用::first-letter伪元素的选择器的CSS规则集的声明块内,只能使用所有CSS属性的一小部分.transform目前不是其中之一.

阅读Mozilla Developer Docs中的更多内容.

由于您使用的是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()返回标题,以及包含在a中的重复的第一个字母<span>.