CODEWITHSUNDEEP
htmlcss
Robert
Robert

Reputation: 10390

CSS :first-letter text-indent not working

I am learning about the pseudo-element :first-letter and tried to indent using the typical text-indent property and value but it is not working. Text indenting only works with margin-left. Any reason as to why?

HTML:

<p>Alice was beginning to get very tired of sitting by her sister on the bank, and of having nothing to do: once or twice she had peeped into the book her sister was reading, but it had no pictures or conversations in it, 'and what is the use of a book,' thought Alice 'without pictures or conversations?'</p>
<p>As with text-indent, you can use pixel or em values to set the value of the margins.
You can also use percentages, but as with text-indent, the percentage is related to
the width of the paragraph’s containing element. Because it’s confusing to calculate
the space above and below a paragraph based on its width, it’s easier to stick with
either em or pixel values. CSS also provides a way of formatting just a part of a paragraph by using the :firstletter
and :first-line pseudo-elements (see Figure 6-16). Technically, these aren’t
CSS properties, but types of selectors that determine what part of a paragraph CSS
properties should apply to. With the :first-letter pseudo-element, you can create
an initial capital letter to simulate the look of a hand-lettered manuscript.</p>

CSS:

p:first-letter {
    font-weight: bold;
    color: red;
    text-indent: 2em;
}

Result: https://jsfiddle.net/opshtvdy/

Upvotes: 0

Views: 1389

Answers (2)

G-Cyrillus
G-Cyrillus

Reputation: 105903

use margin-left on :first-letter.

p:first-letter {
	font-weight: bold;
	color: red;
	margin-left: 2em;
}
<p>Alice was beginning to get very tired of sitting by her sister on the bank, and of having nothing to do: once or twice she had peeped into the book her sister was reading, but it had no pictures or conversations in it, 'and what is the use of a book,'
  thought Alice 'without pictures or conversations?'</p>
<p>As with text-indent, you can use pixel or em values to set the value of the margins. You can also use percentages, but as with text-indent, the percentage is related to the width of the paragraph’s containing element. Because it’s confusing to calculate
  the space above and below a paragraph based on its width, it’s easier to stick with either em or pixel values. CSS also provides a way of formatting just a part of a paragraph by using the :firstletter and :first-line pseudo-elements (see Figure 6-16).
  Technically, these aren’t CSS properties, but types of selectors that determine what part of a paragraph CSS properties should apply to. With the :first-letter pseudo-element, you can create an initial capital letter to simulate the look of a hand-lettered
  manuscript.</p>

or text-indent on p itself 

p:first-letter {
	font-weight: bold;
	color: red;
}
p {
  text-indent:2em;
  }
<p>Alice was beginning to get very tired of sitting by her sister on the bank, and of having nothing to do: once or twice she had peeped into the book her sister was reading, but it had no pictures or conversations in it, 'and what is the use of a book,'
  thought Alice 'without pictures or conversations?'</p>
<p>As with text-indent, you can use pixel or em values to set the value of the margins. You can also use percentages, but as with text-indent, the percentage is related to the width of the paragraph’s containing element. Because it’s confusing to calculate
  the space above and below a paragraph based on its width, it’s easier to stick with either em or pixel values. CSS also provides a way of formatting just a part of a paragraph by using the :firstletter and :first-line pseudo-elements (see Figure 6-16).
  Technically, these aren’t CSS properties, but types of selectors that determine what part of a paragraph CSS properties should apply to. With the :first-letter pseudo-element, you can create an initial capital letter to simulate the look of a hand-lettered
  manuscript.</p>

Upvotes: 2

Dimitris Karagiannis
Dimitris Karagiannis

Reputation: 9358

You use text-indent on the first letter, when you should be using it on the p element itself. You are supposed to be using it on block elements. You can read more about text-indent here

Here's your fiddle with the appropriate CSS rules. https://jsfiddle.net/opshtvdy/6/

Upvotes: 1

Related Questions