CODEWITHSUNDEEP
cssfont-size
Witch-King
Witch-King

Reputation: 293

Making text dynamically larger by adding a certain class

Is there a way to DYNAMICALLY make text larger? Take this example:

* {
    font-size:1em;
}

.large {
    font-size:1.4em;
}

h1 {
    font-size:2.3em;
}

The problem is, when you add the large class to an element like h1, which has its base font size LARGER than the large class, it becomes smaller. Is there any way to make it so that it scales it a certain percentage based on ems? I've already tried percents.

Upvotes: 1

Views: 83

Answers (1)

Jake Jordan
Jake Jordan

Reputation: 311

Keep in mind that both em and percentages are relative sizes, but they rely on the size of the parent element to determine the size of the child element. You can't make something 1.4 times larger than itself any more than you can make it so that two people are taller than each other ;)

You can make any element relatively larger to its parent, so your best bet (using pure HTML and CSS) is to wrap the inner content of any element of which you want to increase the font size with a tag to which you can add the large class you have specified above.

Note: It looks like what we're really trying to do here is to target and style an anonymous text node inside of an element. You can use something like .large::first-line to style the text larger for the first line, but I can't really say that's a solution since it will not style the entire text node.

Upvotes: 1

Related Questions