使用 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（我也尝试在 WordPress 的标题编辑器中输入>span>，但没有成功。

CSS 实际上只做字母的缩放，从 60px 到 80px，但没有任何镜像。

我被屏蔽了，需要提示

Answer 1

根据MDN's docs on ::first-letter，你不能：

只有一小部分 CSS 属性可以在包含使用 ::first-letter 伪元素的选择器的 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 -调整，行高和字体系列。

所有背景属性： background-color、background-image、background-clip、background-origin、background-position、background-repeat、background-size、background-attachment 和背景混合模式。

所有边距属性： margin、margin-top、margin-right、margin-bottom、margin-left。

所有填充属性： padding、padding-top、padding-right、padding-bottom、padding-left。

所有边框属性：简写border、border-style、border-color、border-width、border- radius、border-image 和 longhands 属性。

颜色属性。

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为none时）CSS属性。

编辑

作为替代方案，由于您无法更改 HTML，您可以使用一些 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

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

在Mozilla Developer Docs 中了解更多信息。

由于您使用的是 WordPress，因此您始终可以hook into '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> 中的重复首字母。

Answer 3

这不是最流畅的方式，而且感觉有点笨拙，但我认为这就是你要找的。​​p>

我将它添加到 CSS 中，然后使用 top 和 left 定位新字母。

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

在这里编写代码：http://codepen.io/supah_frank/pen/dCpmo

如果您可以将容器置于 H1 位置之外：relative 它可能有助于定位，因为新字母将是它的兄弟。

Answer 4

我想回答我正在使用的解决方案（不是明确的），不幸的是，在 H1 中使用 span 并不是很简单，所以我想到了这个：

.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 部分，注意第一个字母的“绝对”位置（应该被镜像），否则这是必要的（但我不知道为什么，如果有人知道......）它不会被镜像。之后我需要放置一个相对定位的跨度。不幸的是相对于最后一个“内联”或“相对”元素的结尾，而不是我们“绝对”跨度的结尾。 出于这个原因，我将以下字母向右移动了大约 58px（视觉上看起来还不错）。

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

这是header的PHP，可以看到两个不同的span标签。

对于我遇到的同样的问题，我的同胞朋友 LcSalazar, rnevius 给出的所有解决方案都行不通。 我发布的代码可以正常工作，但我不喜欢这样，我必须放置一个经过多次测试后才能达到的硬编码“58px”，因为如果我更改 css 中最小的东西，这个间隙可能会“转换”为错误的东西。

现在我希望能够计算跨度的宽度，以准确定位第二个。