Properties Heading CSS

[HazelArabia]

What I’m trying to do

Hi all! need help from the css gurus please

I’d like to make use of the content property to set a different heading for the .metadata-properties-heading selector. in essence, hiding the word “Properties” and adding “metadata” in its place

Things I have tried

i have attempted to remove the “Properties” heading to no avail. I was however able to add the metadata part, as seen below. Just that setting visibility to hidden, either hides all of the above or neither

.metadata-properties-heading {
  content: none;
  padding: 0;
  margin: 0;
}

.metadata-properties-heading::after {
  content: "metadata" !important;
} 

[HazelArabia]

If anyone’s interested, the answer was given to me by trainbuffer, on discord

.metadata-properties-title {
    &::before {
        display: block;
        content: "metadata";
        font-size: 1.1rem; 
        color: #aaaaaa;
    }

    font-size: 0px;
    color: transparent;
}

[holroy]

@HazelArabia

i have attempted to remove the “Properties” heading to no avail. I was however able to add the metadata part, as seen below. Just that setting visibility to hidden, either hides all of the above or neither

There are possibilities to hide the entire original heading, and then display what you want instead. But some trickery is needed in order to be able to display the ::before part, and at the same time hide the main part.

Sadly, I don’t think you can hide pure text using CSS, so removing just the “Property” part will not be doable (unless it had been captured in its own HTML element of some sort, which I reckon it isn’t).