In this tutorial we will learn how to change the styles of the first letter of a text.
Sure many have seen in the papers that in some editorial content the first letter of a different style, sometimes larger, with thicker or until another color and safe, too, on some websites content is the same. In this tutorial we learn how to change styles to the first letter of a text.
Pseudo element :: first-letter
In CSS we have a pseudo element :: first-letter that will allow us to change the styles to the first letter of a text. Here is an example, we have a paragraph with any text and we will weigh the pseudo element double the size.
p :: first-letter {
font-size : 2 rem ;
}
You see the first letter of the paragraph is twice the text that follows. Now to use this property should consider a few things:
Block elements only
The element only works on block elements. For example we change the p element for span and see the results:
At the end there was no change in the first letter of the text. So much attention to that.
Compatibility
This pseudo element works correctly in ie 5.5+, Chrome 1+, Firefox 1+, 1+ Safari, Android all, iOS all. Keep in mind that for Internet Explorer and lower versions should use only: first-letter, ie with only two points.
As we have seen change styles of the first letter of a text it is easy, in our example we just changed the size, but we could have changed the color, depth, thickness and any property we wished.