other font-size after <br> in a Heading <h1>
-
26-06-2021 - |
Frage
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?
Lösung
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.
Andere Tipps
If you are able to edit the markup, wrap "name" in a span and target the span with your selector.
Here is one way of doing it:
HTML:
<h2>Heading<br><span class="name">Name</span></h2>
CSS:
.name {
font-size:200%;
}
Example:
However, its more common to keep the heading to one line and put the subheading as a new element (h3
for example) underneath it.
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
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;
}