CSS Pseudo-Element to Apply the First Character of an Element

CSS pseudo-element to apply the first character of an element

From the spec:

Punctuation (i.e, characters defined in Unicode [UNICODE] in the "open" (Ps), "close" (Pe), "initial" (Pi). "final" (Pf) and "other" (Po) punctuation classes), that precedes or follows the first letter should be included

So your bracket and the letter H are selected by :first-letter, because ( is considered a punctuation symbol, not a letter.

There are two workarounds:

1. Wrap your opening bracket in span tags:

   <!-- To style both (), wrap both in <span> tags -->
   <h1><span>(</span>Hello World)</h1>
   

   and target h1 span:

   h1 span {
       font-size: 63px;
       color: #510007;
       font-family: Helvetica;
   }
   

2. Drop the brackets from your text:

   <h1>Hello World</h1>
   

   and use :before and/or :after instead (not supported in IE7 and older):

   /* To style both (), use h1:before, h1:after */
   h1:before {
       font-size: 63px;
       color: #510007;
       font-family: Helvetica;
   }
   
   h1:before { content: '('; }
   h1:after { content: ')'; }
   

CSS ::first-letter pseudo-elements

Note: The ::first-letter pseudo-element can only be applied to block-level elements.

The following properties apply to the ::first-letter pseudo- element:

• font properties
• color properties
• background properties
• margin properties
• padding properties
• border properties
• text-decoration
• vertical-align (only if "float" is "none")
• text-transform
• line-height
• float
• clear

source- https://www.w3schools.com/css/css_pseudo_elements.asp

That is why position is not working for the pseudo-element and in order to align the first-letter you can use margin properties to align it outside of your box

I tried to replicate design as close as possible you can take idea from the snippet to position the first-letter

div{
    padding:25px;
    background-color: #d3d3d3;
    font-size: 20px;
    border:20px solid white;
    display:inline-block;
}
div::first-letter {
    background-color: red;
    font-size: 20px;
    color: white;
    padding:15px;
    font-weight:900;
    margin-left:-40px;
    margin-right:10px;
  }

<div>1 Hello, Welcome To Elzero Web School</div>

How to apply CSS to the first letter after :before content?

Hello.

In case you can not edit the HTML without JavaScript for example, you can use pure CSS so long as you are styling the :before or :after content of a "block-level" element.

p:before {
  content: 'Wisdom'
}

p:first-letter {
  font-size: 7vw;
}

<p></p>

CSS Pseudo-classes Combine :first-child and :first-letter

Do:

p:first-child:first-letter {
    font-size:1.6em;
}

You dont need the space between the two operators.

However this will select all p elements which are the first children. If you only want to do this across every p element on your page regardless of nesting, you will need to add more specificity

Is there a way to select the first character? :first-letter does not seem to work

Indeed, that's odd. Doesn't work for other symbol chars as well and the same problem has been discussed elsewhere on SO as well.

You should try something like this:

<p>hello world</p>

p:before { content:"%"; font-weight: bold; padding-right: 5px;}

​
Try it yourself…

---

Related Topics