Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to change first letter of every posts in Wordpress?

Tags:

css

wordpress

I am trying to customize every single post of first-paragraph starts with first-letter only, bold and larger fonts. But it does not appear on first-letter of the first paragraph. Instead, it appears on every paragraph rather than the first-paragraph.

This is for a Wordpress template. In the past I've tried using the property first-child. However, it didn't seem to be working.

p::first-letter {
  font-size:300%;
  color:#00aff2;
  font-style:bold;
  border: 2px solid #00aff2;
  margin:0 5px 3px 0;
  padding: 3px;
}
<p>This is a sample</p>
<p>This is a sample</p>

I would like to customize the first-letter of every first paragraph of a single post in Wordpress.

like image 235
zaman Avatar asked Jan 02 '19 07:01

zaman


People also ask

How do I adjust text in WordPress?

You can do this easily using the default WordPress block editor. Just click on any paragraph block, then select the font size under 'Typography' on the right-hand side. You can select from the drop-down, which covers Small, Normal, Medium, Large, and Huge.


2 Answers

You can use :first-child to apply ::first-letter to the first paragraph only.

p:first-child::first-letter {
    font-size:300%;
    color:#00aff2;
    font-style:bold;
    border: 2px solid #00aff2;
    margin:0 5px 3px 0;
    padding: 3px;
}
<p>This is a sample</p>
<p>This is a sample</p>
like image 88
Sheedo Avatar answered Oct 08 '22 23:10

Sheedo


Try This

p:first-of-type::first-letter {
    font-size:300%;
    color:#00aff2;
    font-weight: bold;
    border: 2px solid #00aff2;
    margin:0 5px 3px 0;
    padding: 3px;
}
<p>This is a sample</p>
<p>This is a sample</p>
<p>This is a sample</p>
<p>This is a sample</p>
like image 40
zubair khanzada Avatar answered Oct 08 '22 21:10

zubair khanzada