CSS: h2::first-letter with a border needs a margin for the rest of the h2

Question

I hope this could be answered. More details: I want to create extra spacing after the ::first-letter but when I add margin to it expands the border. I tried to find a solution and found ::after but that didn't work for me..

CSS used:

h2::first-letter {
font-size: 200%;
font-family: Times;
padding-left: 5px;
padding-right: 3px;
border:2px solid black;                                                 
}

h2{
    font-family:"Helvetica Neue",HelveticaNeue,Arial,sans-serif;
    font-weight:normal;
}

Any tips or improvements would be really great! I'm pretty new to it, but I learning it at a decent speed.

margin-right works for me any particular browser your having problems with? — sjm, Jul 28 '15 at 23:36

score 0 · Answer 1 · answered Jul 28 '15 at 23:37

You'll want to add a margin-right to your h2:first-letter declaration.

See this fiddle for an example.

h2::first-letter {
   font-size: 200%;
   font-family: Times;
   padding-left: 5px;
   padding-right: 5px;
   margin-right: 3px;
   border:2px solid black;                                                 
}

CSS: h2::first-letter with a border needs a margin for the rest of the h2

1 Answers1