How do I hide part of the H2 text with css?-CodePudding

I know this is not a good practice but is there a way I can hide part of the H2 text with CSS? Here is what I have.

HTML:

   <div >    
    <h2 data-content="My - Text&amp;nbsp;<span style=&quot;float:right;&quot;>May 16, 2022</span>">My - Text&nbsp;<span style="float:right;">May 16, 2022</span></h2>

CSS:

.twocol-box1 h2, .twocol-box2 h2:before {
    content: "My - ";
    position: absolute;
    z-index: 1;
    background-color: white;
    color: white;
}

.twocol-box1 h2, .twocol-box2 h2 {
    position: relative;
    z-index: -1;
}

Updated with Fiddle: https://jsfiddle.net/awm2rs7n/

In my above example, I want to hide "My -"

Expected Output: Text May 16, 2022

Please advise. Thanks.

CodePudding user response：

Using the background color to cover the text:

#hideme {
  position: relative;
}

#hideme:before {
  position: absolute;
  width: 50px;
  top: 0;
  bottom: 0;
  z-index: 2;
  background: white;
  content: ""
}

<div >
<h2 id="hideme">My - Text<span style="float:right;">May 16, 2022</span></h2>
</div>

CodePudding user response：

There is currently no great way to do this in CSS. There is a hacky way of using the :before pseudo-element with content to target the text you want to hide. I'd suggest using js to physically remove the text.

If your text is always the same it will work. Essentially this solution just finds the text and masks it.

h2 {
  position: relative;
}

h2:before {
  content: "My - ";
  position: absolute;
  background-color: white;
  color: white;
}

<div >
  <h2>My - Text<span style="float:right;">May 16, 2022</span></h2>
</div>

CodePudding user response：

you can add another span give it a class then display none.

span.hideme {display: none;}

<div >
<h2 >
<span >.My - </span>Text<span style="float:right;">May 16, 2022</span></h2>
 </div>

CodePudding user response：

you can use span to wrap the part of h2 and add a class to select the span in CSS and then you can apply the any CSS properties you want . For your question below is the code

.hide {
  display: none;
}

<div >
  <h2 ><span >My - </span> Text<span style="float:right;">May 16, 2022</span></h2>
</div>