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的Title编辑器中键入>span>但没有成功。

CSS实际上仅仅是字母的比例，从60px到80px，但没有任何镜像。

我被封锁了，需要提示

Answer 1

根据MDN's docs on ::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。

  所有背景属性：背景颜色，背景图片，背景剪辑，背景原点，背景位置，背景重复，背景大小，背景附件和背景混合模式。

  所有保证金属性：保证金，保证金最高，保证金权利，保证金最低保证金，保证金保证金。

  所有填充属性：填充，填充顶部，填充右侧，填充底部，填充左侧。

  所有边框属性：短边框边框，边框样式，边框颜色，边框宽度，边框 -   radius，border-image和longhands属性。

  颜色属性。

  文本修饰，文本阴影，文本转换，字母间距，文字间距（适当时），行高，文本装饰颜色，文本装饰行，文本装饰样式，框阴影，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

在包含使用::first-letter伪元素的选择器的CSS规则集的声明块中，只能使用所有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

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

我将此添加到CSS中，然后使用顶部和左侧放置新字母。

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

Codepen：http://codepen.io/supah_frank/pen/dCpmo

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

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>

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

对于我遇到的同样问题，我的朋友LcSalazar给出的所有解决方案，rnevius根本不起作用。我发布的代码是IS工作，但我不喜欢我必须在几次测试后放置一个硬编码的“58px”，因为如果我改变了css中最小的东西，这个差距可能会“转变”为错误。

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

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

4 个答案: