我有这个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,但没有任何镜像.
我被封锁了,需要小费
解决方法
::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:
var title = document.querySelector('.site-title'); var fletter = title.innerHTML.charAt(0); title.innerHTML = title.innerHTML.replace(fletter,'<span>'+fletter+'</span>');