CODEWITHSUNDEEP
css
Moriah Gibbs
Moriah Gibbs

Reputation: 37

: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:

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

Upvotes: 0

Views: 2418

Answers (3)

Free Palestine
Free Palestine

Reputation: 976

: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

Upvotes: 2

Moriah
Moriah

Reputation: 1

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

That's how the W3Schools example does it.

Upvotes: -1

djthoms
djthoms

Reputation: 3096

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>

Upvotes: 0

Related Questions