How do I stop repeating the text-CodePudding

I have a WordPress site, I need to change the "We are now open " text in my HTML site. Since my editor is not working I used CSS to replace the text. I found the correct class and applied the following changes, but the problem is the changed text is repeating. It applies twice I only need the bigger one. How do I stop repeating?

The view once I applied the custom CSS

This is how it looks now

Custom CSS I applied

.elementor-element-4756de9  {
    visibility:hidden;
    position:relative;
}
.elementor-element-4756de9 :after {
    visibility:visible;
     position: absolute;
    top: 0;
    left: 0;
    content: "We are closed for the season";
    
    
}

HTML Code

<div  data-id="4756de9" data-element_type="widget" data-widget_type="heading.default">
   <div >
   <h2 >We are now open for the 2022 Season</h2>
   </div>
</div>

I tried to use the text inside the <span> but it didn't work. Any idea to stop the repeat?

CodePudding user response：

.elementor-element-4756de9 {
  visibility: hidden;
  position: relative;
}

.elementor-element-4756de9 :after {
  visibility: visible;
  position: absolute;
  top: 0;
  left: 0;
  content: "We are closed for the season";
}

.elementor-element-4756de9 .elementor-heading-title {
  display: none;
}

<div  data-id="4756de9" data-element_type="widget" data-widget_type="heading.default">
  <div >
    <h2 >We are now open for the 2022 Season</h2>
  </div>
</div>

CodePudding user response：

Adding h2 fixed the problem

.elementor-element-4756de9 :after {
    visibility:visible;
     position: absolute;
    top: 0;
    left: 0;
    content: "We are closed for the season";
    
    
}