# Using CSS pseudo-element "first-letter"

**URL:** <https://forum.inductiveautomation.com/t/using-css-pseudo-element-first-letter/40552>\
**Category:** Ignition\
**Tags:** perspective, ignition80\
**Created:** [November 11, 2020, 6:32pm UTC](https://forum.inductiveautomation.com/t/using-css-pseudo-element-first-letter/40552 "2020-11-11T18:32:18Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\
**Post date:** [November 11, 2020, 6:32pm UTC](https://forum.inductiveautomation.com/t/using-css-pseudo-element-first-letter/40552/1 "2020-11-11T18:32:18Z")

</div>

I’m trying to use the css pseudo-element `::first-letter` to set the first letter of a sentence to capital, but I’m struggling to get it working…

I added a class into my css theme and it’s showing up in dev tools:

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/f/9/f9b987a5a94358e6dd7874e13cdb9d967b0a2a88.png)

But the text in my span isn’t having the style applied (I added font-size to make it obvious, because at the moment i’m not setting the rest of the sentence to lowercase - will do that after I prove the pseudo-element works)

I’ve proved that this works in jfiddle inside multiple divs and a span:  
[http://jsfiddle.net/ckdazgm8/](http://jsfiddle.net/ckdazgm8/)

---

<div class="post-metadata">

**Author:** ![paul-griffith](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/paul-griffith/32/37249_2.png) [@paul-griffith](https://forum.inductiveautomation.com/u/paul-griffith)\
**Post date:** [November 11, 2020, 7:01pm UTC](https://forum.inductiveautomation.com/t/using-css-pseudo-element-first-letter/40552/2 "2020-11-11T19:01:50Z")

</div>

Check the style information on the `<span>` element itself - it’s likely not inheriting from the outer div. Unfortunately, if that’s the case, I don’t think there’s really any workaround using the label component.

---

<div class="post-metadata">

**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\
**Post date:** [November 11, 2020, 7:12pm UTC](https://forum.inductiveautomation.com/t/using-css-pseudo-element-first-letter/40552/3 "2020-11-11T19:12:08Z")

</div>

> [@paul-griffith](#):
>
> label component

I swapped over to the Markdown component (I really need to remember about that!) and BAM! Although I still couldn't see the pseudo-effect attached to the span... I did however see that the style class was attached to it. I'm still figuring out how all this works still.. so I'm probably misunderstanding something, or everything... 😅

![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/7/5/7560ea4ef584864bc65531228acb3c34fdd07884.png)

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/3/b/3b40b412b6471607a767cabdae07cce94d304ef4.png)

Thanks for the prompt!