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

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 class="twocol-box1 superflex-content-6-12">    
    <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.

htmlcssjavamavengradlecucumber


Solution 1:[1]

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 class="mytext">
<h2 id="hideme">My - Text<span style="float:right;">May 16, 2022</span></h2>
</div>

Solution 2:[2]

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 class="mytext">
  <h2>My - Text<span style="float:right;">May 16, 2022</span></h2>
</div>

Solution 3:[3]

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

span.hideme {display: none;}
<div class="mytext">
<h2 class="hidepartial">
<span class="hideme">.My - </span>Text<span style="float:right;">May 16, 2022</span></h2>
 </div>

Solution 4:[4]

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 class="mytext">
  <h2 class="hidepartial"><span class="hide">My - </span> Text<span style="float:right;">May 16, 2022</span></h2>
</div>

Solution 5:[5]

Gradle does not support parallel execution below class level. So with Gradle and JUnit 4 you can not run Cucumber in parallel.

With Gradle and JUnit 5 this is not a problem as JUnit 5 will handle parallel execution. You will however have to use Cucumbers JUnit Engine:

https://github.com/cucumber/cucumber-jvm/tree/main/junit-platform-engine

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 Kameron
Solution 3 Crystal
Solution 4 aditya sharma
Solution 5 M.P. Korstanje

Related Questions