Why has my link an infinite width?

Question

My xml link code

the tag is the link.

 <b>link 1</b><l href="#">description</l>

Css code

l{
  color:#222;
  font-size:18;
  font-style: italic;
  display:block;
  transition:all 0.4s;
  -webkit-transition:all 0.5s;
  text-decoration:none;
  width:auto;
}
l:hover{
  cursor:pointer;
  color:blue;
} 

When I specify a width like 200px it works but when I put it to auto it doesn't so can somebody help me with solving this problem?

I have Jquery working on the page so if I need to solve the problem with Jquery that is no problem.