':first-letter pseudo-element not working in Firefox

The first letter pseudo element is not working in Firefox no matter what I do. It works in Chrome, Safari, and Opera but not Firefox.

Here is the piece of CSS:

.dyk
{
    font-family: Myanmar Sangam MN;
    line-height: 100px;
    font-weight: 900;
    font-size: 20pt;
    width: 250px;
    position: relative;
    float: left;
}
.dyk:first-letter
{
    font-size: 60px;
}

Things I've tried:

  • validating the html and CSS files
  • CSS reset file

I have looked at my code over and over again but I cant figure out what's wrong.

css


Solution 1:[1]

:first-letter in CSS2 or ::first-letter in CSS3 only works on block level elements, it doesn't work on inline elements in Firefox. If you are for example trying to use it in a span it won't work in Firefox. You can learn more about it's specifications here https://drafts.csswg.org/css-pseudo-4/#first-letter-application

Solution 2:[2]

Seems like a user had a similar problem, maybe this will shed some light! ::first-letter pseudo-element not working in firefox

In a bare bones example it works, hope this helps:

<style type="text/css">
.dyk {
    font-family: Myanmar Sangam MN;
    line-height: 100px;
    font-weight: 900;
    font-size: 20pt;
    width: 250px;
    position: relative;
    float: left;
}
.dyk:first-letter { font-size: 60px; }
</style>
<div class="dyk">This is a test!</div>

Solution 3:[3]

You could try .dyk::first-letter instead of .dyk:first-letter.

That's how the W3Schools example does it.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Andrew
Solution 2 Community
Solution 3 DimaSan

Related Questions