How to use transition with links on mozilla

I have this code it should scale a link when the mouse is over it

HTML

<a class='subj' href='#'>English 2</a> </br>

CSS

    .subj{
    text-decoration:none;
    transition: 0.5s ease-in-out ;
    -webkit-transition: 0.5s ease-in-out;
    -moz-transition: 0.5s ease-in-out;
}
.subj:hover { 
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    transform: scale(1.2); 
}    

This code works fine on both chrome and mozilla when the tag is <p> but when it is <a> it's not working on mozilla but it does on chrome

Set the .subj display property to inline-block.

.subj {
    text-decoration:none;
    transition: 0.5s ease-in-out;
    -webkit-transition: 0.5s ease-in-out;
    -moz-transition: 0.5s ease-in-out;
    display: inline-block;
}