Mirror the first letter of text using CSS

Question

I searched a lot for a way to do what I want, but only found ways that I cannot use.

The problem is that I want to reflect ONLY the first letter of the Wordpress site name.

I have this css:

.site-title { font-family: fontLogo; font-size: 60px; font-weight: bold; line-height: 1; margin: 0; padding: 58px 0 10px; } 

and I added this snippet:

 .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); } 

The class is used here:

 <h1 class="site-title">TheTitle</h1> 

The second problem is that I CANNOT CHANGE this line, the only thing I can do is work with css (I also tried typing >span> in the WordPress header editor without success.

CSS actually does ONLY the scale of the letter, from 60 pixels to 80 pixels, but nothing is mirrored.

I am blocked and need a hint

Answer 1

According to the MDN docs on ::first-letter you cannot:

Inside the CSS rule set declaration block containing the selector, you can use only a small subset of all CSS properties using the :: first-letter pseudo-element:

All font properties: font, font, font-settings-function, font-kerning, font-language-redefinition, font-stretch, font synthesis, font-variant, font-variant-alternative, 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 the font family.

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

All field properties: margin edge, margin-right, margin-bottom, margin-left.

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

All border properties: abbreviation border, border, border, border, border, radius, image border, and longhands properties.

Color property .

Text-decoration, text-shadow, text-transform, letter-spacing, word-spacing (if necessary), line-height, text-decoration-color, text-decoration-line, text-decoration-style, box-shadow, float, vertical-align (only if there is no float) CSS properties.

EDIT

Alternatively, since you cannot change the HTML, you can turn the first letter into a real element with some 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

Inside the declaration block of the CSS rule set containing the selector, using the ::first-letter pseudo-element, you can use only a small subset of all CSS properties. transform is not currently one of them.

Read more in Mozilla Developer Docs .

Since you are using WordPress, you can always connect to 'the_title' and add a <span> to the header. Something like:

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

This will cause the_title() return the header along with the duplicate first letter enclosed in the <span> .

Answer 3

This is not the smoothest path and it feels a bit hacky, but I think this is what you are looking for.

I added this to CSS and then put a new letter using the top and left.

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

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

If you can make the container out of position H1: relative, this will probably help with positioning, since the new letter will be his sibling.

Answer 4

I want to say that the solution I'm using (not final), unfortunately, using span inside H1 is not very simple, so I came to this:

 .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; } 

This is an interesting part of CSS. NOTE The "absolute" position for the first letter (which should be mirrored) is necessary otherwise (BUT I DO NOT KNOW WHY if anyone knows ...) it will not be displayed. After that I need to set the relative position range. Unfortunately, this refers to the end of the last "inline" or "relative" element, and not to the end of our "absolute" range. For this reason, I move the following letters to the right about 58 pixels (this looks pretty good visually).

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

this is a PHP header, you can see two different span tags.

On the same problem that I encountered, all the solutions given by my friends-friends LcSalazar, rnevius simply will not work. The code I posted works, but I don’t like that I need to put hardcoded "58px", which is achieved after several tests, because if I change the smallest thing in css, this space can be "converted" to something wrong .

At the moment, I would like to be able to calculate the span width to accurately position the second.