CSS :first-letter not working

Question

Need to show first letter bigger than other letters.

Fiddle: https://jsfiddle.net/mc165upk/1/

But background should be shown with line height.

css:

.main-heading p {
    padding: 0px 10px;
    display: inline;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    line-height: 91px;
    background: #faf98e;
    font-size:72px;
}
.t1-result-topheading p:first-letter { font-size: 108px; }

Answer 1

According to the docs , :first-letter will only work for block-level elements. Since you explicitly set your paragraph to be display: inline; , :first-letter will not work. You can fix it by setting display: block; or display: inline-block; .

There was another error in your fiddle in that .t1-result-topheading was not a parent class in the HTML for that paragraph, so the style wouldn't be applied anyway.

Edit: Since you want to maintain spaces between the lines, you can accomplish this by wrapping your text in a span (inline by default), applying the background color to the span, and using :first-letter on the paragraph (which will be block-level by default).

 .main-heading span { padding: 0px 10px; -webkit-box-decoration-break: clone; box-decoration-break: clone; line-height: 91px; background: #faf98e; font-size: 72px; } p:first-letter { font-size: 108px; } 

 <div class="main-heading"> <p><span>How much should you pay for a video campaign?</span></p> </div> 

Answer 2

The :first-letter as defined in the spec http://www.w3.org/TR/CSS2/selector.html#first-letter only applies to a block level element. So if you want to use ::first-letter selector you have to make the element display:inline-block; .

Also there was error in your css .t1-result-topheading p:first-letter { font-size: 108px; } .t1-result-topheading p:first-letter { font-size: 108px; } was not available in your html code , so fixed that as well.

Working snippet:

 .main-heading p { padding: 0px 10px; display: inline-block;; -webkit-box-decoration-break: clone; box-decoration-break: clone; line-height: 91px; background: #faf98e; font-size: 72px; } .main-heading p::first-letter{ color:red;} 

 <div class="main-heading"> <p>How much should you pay for a video campaign?</p> </div> 

EDIT

The Jquery solution if you want to use display:inline only.

 $('p').html(function (i, html) { return html.replace(/^[^a-zA-Z]*([a-zA-Z])/g, '<span class="First--letter">$1</span>'); }); 

 .main-heading p { padding: 0px 10px; display: inline; -webkit-box-decoration-break: clone; box-decoration-break: clone; line-height: 91px; background: #faf98e; font-size: 72px; } .First--letter{ color:red;} 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="main-heading"> <p>How much should you pay for a video campaign?</p> </div> 

Answer 3

1. The "parent" element of this: .t1-result-topheading p:first-letter { ... } points to a non-existing element (as what is written on your code, on your fiddle). There is no such element as .t1-result-topheading , and therefore will not apply the CSS rule.

2. Use display: inline-block as this will let the element have a width and a height .

   As what w3schools have said:

   inline-block elements are like inline elements but they can have a width and a height.

---

Therefore, your code should be:

 .main-heading p { padding: 0px 10px; display: inline-block; -webkit-box-decoration-break: clone; box-decoration-break: clone; line-height: 91px; background: #faf98e; font-size:72px; } .main-heading p::first-letter { font-size: 108px; } 

 <div class="main-heading"> <p>How much should you pay for a video campaign?</p> </div> 

Answer 4

Update css code below

.main-heading p {
  display: inline-block;
}

Answer 5

CSS ::first-letter Selector

p::first-letter {
   font-size: 200%;
   color: #8A2BE2;
}

Answer 6

使用此链接了解first-letter [ https://www.w3schools.com/cssref/sel_firstletter.asp][1]

.t1-result-topheading p::first-letter { font-size: 108px; }