CODEWITHSUNDEEP
css
dotcom22
dotcom22

Reputation: 259

Modify/hide text with css only

I have a page where I don't have access to html who content this:

<span id="page_title_text">Welcome - Overview</span>

and I would like get this:

 <span id="page_title_text">Overview</span>

Due to the fact I cannot simply modify the text in the code itself, I wondering if is possible to hide the text "Welcome -" with css only (I have access to css related file).

Any suggestion ? thank

Upvotes: 1

Views: 127

Answers (3)

Zack
Zack

Reputation: 45

People don't seem to be understanding your question...

I'm not sure if this can be accomplished elegantly.

You can try something "hacky" like this though:

#page_title_text {
    position:absolute;
    top: -15px;
    width: 70px;
}
#page_title_text:first-line {
    color:white;
}

JSFiddle

Of course this answer assumes existing styling etc. And it doesn't get rid of the textual content as well. There are just ways to hide it (with coloration or positioning etc.)

Upvotes: 1

Priidu Kull
Priidu Kull

Reputation: 107

#page_title_text:before {
    content: "Welcome - ";
}

Upvotes: 1

Daniel Gimenez
Daniel Gimenez

Reputation: 20494

You can just update the text or do an actual replace:

Update Text

document.getElementById('page_title_text').innerHTML = 'Overview' ;

Replace

document.getElementById('page_title_text').innerHTML =
   document.getElementById('page_title_text').innerHTML.replace(/Welcome -/,'');

jsFiddle

Upvotes: 2

Related Questions