CODEWITHSUNDEEP
css
mnbadger
mnbadger

Reputation: 37

CSS - Change Element tag and replace its content

I don't have access to the HTML page so I'm stuck using CSS Content to replace text. The text I'm replacing uses h1 title tags and I'm trying to replace said text with using h3 tags.

.class::before {
content: '<h3> Replacement Text </h3>';

On at least Chrome and IE the title tags are ignored. The replacement text does display but in default h1 title tag.

Upvotes: 2

Views: 2086

Answers (3)

Carlos
Carlos

Reputation: 1

.class-b {
    display: none;
}
    
@media(max-width:1068px) {                
    .class-a {
        display: none;
    }
    
    .class-b {
        display: block;
    }            
}

<h3><span class="class-a">Schüler Infos</span><span class="class-b">Infos</span></h3>

Upvotes: 0

Korren
Korren

Reputation: 51

Your best option for this situation is to style the class as an h3, overriding the h1 styling. As long as the styling for this class is below the styling for h1, it should take precedence.

You'll also need to hide the original content because content doesn't replace content.

For example:

h3 {
        font-size:2em;
        color:#424242;
    }
    .class {
        visibility: hidden;
    }
    .class::after {
        content: 'Replacement Text';
        visibility: visible;
        font-size:2em;
        color:#424242;
    }
<h3 class="class">text</h3>

Upvotes: 1

Kareem Dabbeet
Kareem Dabbeet

Reputation: 3994

Actually you can't change the tag itself.

But you can change its content with css trick:

See This Demo

h1 {
  visibility: hidden;
  position: relative;
}

h1::after {
  content: 'Applied From CSS';
  display: block;
  visibility: visible;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

</style>
<h1>Applied From HTML</h1>

Upvotes: 2

Related Questions