Add CSS class to all heading HTML elements?

Issue

I’m currently working on a website for some school assignments.
I am using WordPress with the Divi theme.

Online I found some CSS code, which lets me add a colored line under my text. I’ve been using this on all my headings.

• Here’s an example of my headings: https://colindedeugd.nl/wp-content/uploads/2021/09/Header-Colored-Line-Example.jpg

The CSS code for it looks like this;

    .pa-color-highlight {
    text-decoration: none;
    box-shadow: inset 0 -.4em 0 rgba(48, 227, 255, 1);
    color: inherit;
}

To add this to my heading, I used some HTML code;

<h2><span class="pa-color-highlight">Background</span></h2>

My problem is that I have to manually add this HTML code everytime I want to use a heading. Simply converting my text to ‘H2’ in standard text editor ignores this CSS class.
I was wondering if there was a way to automatically add this CSS class to all (H2) headings, sitewide. Is there a simple solution for it? If so that would be a great help!

I’ve already tried adding the highlight CSS to the heading directly using CSS, but that looks like this:

h2 {
    text-decoration: none;
    box-shadow: inset 0 -.4em 0 rgba(48, 227, 255, 1);
    color: inherit;
    font-size: 45px;
}

• Example image;
  https://colindedeugd.nl/wp-content/uploads/2021/09/Header-Colored-Line-Example-2.jpg

The line fills the whole text field, instead of just underlining the text itself. If there’s a simpler solution for this issue than the other thing, I would be more than happy!

Thanks for your time.

Solution

I assume the display: table should meet your needs:

h2 {
    text-decoration: none;
    box-shadow: inset 0 -.4em 0 rgba(48, 227, 255, 1);
    color: inherit;
    display: table;
}

Answered By – Frederik

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0