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

Question

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?

Answer 1

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.

Answer 2

If you are able to edit the markup, wrap "name" in a span and target the span with your selector.

Answer 3

Here is one way of doing it:

HTML:

<h2>Heading<br><span class="name">Name</span></h2>

CSS:

.name {
    font-size:200%;
}

Example:

http://jsfiddle.net/ghWKm/

However, its more common to keep the heading to one line and put the subheading as a new element (h3 for example) underneath it.

Answer 4

you can use

`<h1>`Welcome text from`<span class="abc">Name</span></h1>

instead of

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

And give style to .abc

Answer 5

Why not wrap each side in a span and then set the sizes differently there, this will also mean that you do not need the br.

<h1>Welcome text from<span class="size2">Name</span></h1>

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

h1 .size2 {
  font-size: 50px;
}