Search code examples
htmlcssfont-sizehtml-heading

other font-size after <br> in a Heading <h1>

Ok here is the thing. I need 2 different font sizes in my <h1> heading. The text after the <br> need to be larger than the text before.

<h1>Welcome text from<br>Name</h1>

So I tried it with 

h1 {
  color: #c3c2c2;
  font-size: 35px;
}

h1 br:after {
  font-size: 50px;
}

But this doesn't work, any ideas or suggestions?

Solution

  • If you don't want or cannot change the markup, you could use the :first-line selector from CSS3. Something like this:

     <h1>Welcome text from <br/> Name</h1> 

 h1 { 
   color: #c3c2c2; 
   font-size: 50px; 
 } 

 h1:first-line { 
   font-size: 35px; 
 }

    According to Quirksmode the compatablity is quite okay, especially if you use the one-colon syntax over the ::first-line syntax (all good browsers support it, and IE from 5.5 and up as well).

    See a jssfidle for a working demo.