CODEWITHSUNDEEP
htmlcss
magicsinger
magicsinger

Reputation: 127

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.

Upvotes: 0

Views: 956

Answers (4)

aditya sharma
aditya sharma

Reputation: 1

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>

Upvotes: 0

Crystal
Crystal

Reputation: 1992

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>

Upvotes: 0

Kameron
Kameron

Reputation: 10846

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>

Upvotes: 1

Andi
Andi

Reputation: 2992

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>

Upvotes: 1

Related Questions