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

前端之家收集整理的这篇文章主要介绍了使用CSS镜像文本的第一个字母前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
搜索了很多方法来做我想做的事,但我只找到了一些我无法使用的方法.

问题是:我想只镜像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,但没有任何镜像.

我被封锁了,需要小费

解决方法

根据 MDN’s docs on ::first-letter,你不能:

Only a small subset of all CSS properties can be used inside a declaration block of a CSS ruleset containing a selector using the ::first-letter pseudo-element:

All font properties : 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 and font-family.

All background properties : background-color,background-image,background-clip,background-origin,background-position,background-repeat,background-size,background-attachment,and background-blend-mode.

All margin properties: margin,margin-top,margin-right,margin-bottom,margin-left.

All padding properties: padding,padding-top,padding-right,padding-bottom,padding-left.

All border properties: the shorthands border,border-style,border-color,border-width,border-
radius,border-image,and the longhands properties.

The color property.

The text-decoration,text-shadow,text-transform,letter-spacing,word-spacing (when appropriate),line-height,text-decoration-color,text-decoration-line,text-decoration-style,Box-shadow,float,vertical-align (only if float is none) CSS properties.

编辑

作为替代方案,由于您无法更改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>');

猜你在找的CSS相关文章