Create attractive first character in paragraph using CSS

I was talked about “Less used properties in CSS” in a blog post previously. Today I will talk about a property less known too, in CSS you can target the first letter in your paragraph without using <span> to target the letter.

In your HTML paragraph you can target the first letter using a special CSS pseudo element named ::first-letter for example if you want to make your paragraph first letter Bigger and Red maybe..

css first letter
example of what we will do

Let’s try a practical example

The HTML Part

<p>
dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley
</p>

Now let’s try to target the first letter in the previous paragraph using the ::first-letter pseudo element.

The CSS Part

p::first-letter {
    float: left;
    font-size: 3em;
    font-weight: bold;
    line-height: 3em;
    margin-right: .3em;
    text-transform: uppercase;
    color: red;
}

Above we targeted the first letter in all our HTML paragraph, we make it left with specific size and transform and red color.

In addition to that note use a single colon :first-letter Internet Explorer 8 and down.

Example in Action

Check this link to see our example in action: https://jsfiddle.net/Mohcinbn/q36bckj0/8/

HOPE THIS FLASH IS HELPFUL

Leave a Reply

Your email address will not be published. Required fields are marked *