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

Question

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

7

我搜索了很多方法，想要实现我的目标，但是我只找到了一些我不能使用的方法。

问题是：我只想镜像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，但没有反映任何东西。

我被阻塞了，需要一个提示。

- Gianmarco

2

如果它是一个“T”字母，你怎么知道它是否镜像？ - LcSalazar

它没有被镜像。我把字母改成了“E”，但还是不行。 - Ian Hazzard

显然，LcSalazar我正在尝试使用一种不对称的自定义字体。顺便说一下，原始标题以"M"开头，如果在标准字体中镜像，也是相同的。但为了清晰起见，我没有在这里放出原始标题。 - Gianmarco

如果您想在WordPress中将所有标题的第一个字母添加到一个span中，可以在主题的function.php文件中钩入the_title过滤器。 - yoavmatchulsky

顺便提一下，CSS 生成的伪元素（::before 和 ::after）需要设置 content 属性（即使只是空字符串 content: '';），才能被渲染出来。 - David Thomas

另请参见https://dev59.com/M3A75IYBdhLWcg3wK10p - Pacerier

4个回答

6

在包含使用::first-letter伪元素的选择器的CSS规则集的声明块中，只有所有CSS属性的一小部分可以使用。目前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>。

- rnevius

非常有趣。我自己也在思考类似的问题，所以我认为我们达到了相同的想法（你比我早一点哈哈）。我需要弄清楚的是标题在哪里和何时使用，因为我只需要在主页的h1标题中进行镜像（这仅仅是出于图形原因）。 - Gianmarco

哥们，这可能是解决方案，而且，如果我想翻转其他字母，在这种情况下我也能做到。 - Gianmarco

@Gianmarco 如果您修改我上面的代码，并将最终的 $title 包装在 <h1> 标签中，那么整个首字母跨度就会在 <h1> 标题之外。这意味着绝对不会对 SEO 产生任何影响。 - rnevius

我正在测试你的代码，但我认为我们犯了一个错误。我查看了代码并发现我真正需要更改的是这个： bloginfo（'name'）; 但我也想到，也许我能够编辑模板的HTML。 - Gianmarco

我可以编辑HTML，但是，在h1标签内部，span无法有效地进行镜像。我不明白你所说的“这意味着整个首字母跨度在<h1>标题之外”。 - Gianmarco

显示剩余3条评论

3

这并不是最流畅的方式，感觉有点差劲，但我认为这就是你要找的。

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

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

这里是Codepen链接: http://codepen.io/supah_frank/pen/dCpmo

如果您可以将H1外的容器设置为position: relative，这可能会有助于定位，因为新的字母将成为它的同级元素。

- AndrewTet

如果标题不是动态变化的，那么这绝对是一个选项。 - rnevius

是的，正如我所说，这有点hacky，我不太喜欢硬编码字母，我更喜欢将字母的绝对位置定位到实际的H1而不是其父级，但是如果没有访问HTML的其他方式，我想不出其他方法。 - AndrewTet

这是垂直翻转，我正在寻找垂直镜像。我想我可以用rotateY来实现。事实是：字母放在最后(:after)，如果我使用::before，它会重叠到实际标题上。使用relative不起作用。顺便说一下，如果我必须硬编码一个字母，这可能不太有用(我可以使用jpeg)，而且这可能对SEO造成问题，因为引擎永远不会读取整个站点的标题。但感谢您，这是一个非常有趣的+1答案。 - Gianmarco

我已经编辑了我的问题，展示了如何使用WordPress钩子来隔离任何标题的第一个字母。不确定这是否会改变事情。 - rnevius

0

我想把我正在使用的解决方案作为答案，但不是最终版本。不幸的是，在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部分，注意第一个字母（应该镜像）的“绝对”位置，这是必要的，否则（但我不知道为什么，如果有人知道...）它将无法反射。之后，我需要放置一个相对定位的span。不幸的是，它是相对于最后一个“内联”或“相对”元素的末端，而不是我们的“绝对”span的末端。因此，我将以下字母向右移动约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给出的所有解决方案都不起作用。我发布的代码是有效的，但我不喜欢必须放置一个硬编码的“58px”，因为如果我更改CSS中的最小内容，此间隙可能会“转化”为错误的内容。

目前，我希望能够计算span的宽度，以确切地定位第二个span。

- Gianmarco

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- LcSalazar · Accepted Answer

根据MDN关于::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-adjust、line-height和font-family。

所有背景属性：background-color、background-image、background-clip、background-origin、background-position、background-repeat、background-size、background-attachment和background-blend-mode。

所有边距属性：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和长手属性。

颜色属性。

文本装饰、文本阴影、文本转换、字母间距、单词间距（适用时）、行高、文本装饰颜色、文本装饰线、文本装饰样式、盒子阴影、浮动、垂直对齐（仅当浮动为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>');