Changing font-size with the CSS ::after pseudo-element isn't working

HTML & CSS
1

I’m attempting to use the ::after pseudo-element to change the font-size as a sort of h2 byline sub-heading.

The ::after pseudo-element “content” is appearing as expected but even with an !important declaration the font-size remains unchanged.

Here’s the HTML and CSS that I’ve used:

HTML
<h2 class="feature">Featured Testimonial <br></h2>

CSS

body.page-id-1945 h2.feature {
padding: .618em 15px 0 15px;
margin-left: 1.618em;
text-align: left;
}

body.page-id-1945 h2.feature::after {
	content: "A Magnesium Oil Extra Unbeliever"; 
padding-top: 0;
font-size: 1em !important;
}/* NOT WORKING
---------------- */

Any idea why the style isn’t sticking. Or perhaps you could suggest a better way to accomplish what I’m attempting to achieve.

Thanks

2

I don’t think you want to use 1em, 1em is to the font-size of your h2.feature, so you want to either use .75em or 1.25em depending on if you want it larger or smaller.

Keep in mind em is relative to the element, so when you say 1em, you are saying, same font-size as the element. That is why you want to use .75em or 1.25em depending on if you want it larger or smaller.

Example:

3 Likes
3

Hum, that’s pretty awesome!

Thanks for putting the example together on Code Pen… Much appreciated!

My bad, I forgot to include the font-size of the h2 element, which is:

h2 {
    font-size: 2em;
    line-height: 1.214;

So, is it correct that because of the relative (em) sizing, the 1em font-size of the h2.feature::after was actually 2em?

Wow, I would have never caught that!

Thanks again cpradio

4

Yes. In that case 1em in ::after is equivalent to 2em, the element’s initial font size. So you would still want to use .75em for smaller, or 1.25em for larger.

5

Just another point I would like to raise about this method.
Is there some special reason why you are using a pseudo element to append the heading, as this does not make much sense to me?
As far as the html is concerned, the second part of the heading does not exist, I doubt that bots and screen readers will “see” it. Perhaps that is the intention. But if however all you are wanting to do is have a second line of smaller text, there are better ways to do that.
In this example I used a <span> element to separate the second part of the heading.

<off-topic>codepen one boxes work again! :joy:

3 Likes
6

Sorry for my rhetorical question.

I actually got it on the first go and am infinitely grateful.

Thanks again, cpradio

7

Some find the cascading nature of the em unit confusing. The other option is to use the rem unit.
That is relative to the text size at the root of the document, rather than being relative to the parent object of an element like the em. So some find that easier to work with.
The way you did the original css would have worked with rem, as you expected a size of 1 to bring the text back to the “normal” font size, as opposed to not changing the size, as em does.

Personally I like to use em and use it almost exclusively, but some prefer the rem, it’s down to your preference.

5 Likes
8

SamA74, thanks for that suggestion.

You’re 110% right! I want that keyword rich phrase to get picked up by the bots. So, I went ahead and changed to the pseudo element to the span approach that you suggested.

9

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.