Hide some text through CSS

Question

I'm working on a website through WordPress and for some reason, I can edit the CSS but not the HTML, and I want to hide some text but not all off of it. The code is:

.entry-header .entry-title::after {
  content: "Create Theme" !important;
}

<header class="entry-header ">
  <h1 class="entry-title ">
            "Create Course"
            ::after
        </h1>
</header>

Which displays: Create CourseCreate Theme. And I want it to display: Create Theme. Is this possible through CSS?

I would find the root of your problem, first - rather than finding hacks to solve your issue. *WHY* can't you edit the HTML? Permissions? No HTML to edit for the page in question? I had a bad experience with a WP site before, where there was no HTML in the homepage - someone had gone and set it all in a template! This was hidden somewhere under the hood of the site's template settings. If possible, try and address the deeper problem you're experiencing :) — Geoff James, Aug 25 '16 at 11:42

thepio · Answer 1 · 2016-08-25T11:49:01.277

3

This might be a little ugly hack but considering your situation if you can't modify the HTML you could play with text-indent to hide the original text and then overwrite the text-indent of the parent by setting display: block; to the after pseudo element like this:

.entry-header .entry-title {
  text-indent: -9999px;
}

.entry-header .entry-title::after {
  text-indent: 0px !important;
  display: block;
  float: left;
  content: "Create Theme";
}

<header class="entry-header ">
  <h1 class="entry-title ">Create Course</h1>
</header>

edited Aug 25 '16 at 11:49

answered Aug 25 '16 at 11:39

thepio

6,193
5
35
54

@JonSmith - don't forge to mark as "accepted" when possible, if this answer solved your problem :) – Geoff James Aug 26 '16 at 10:46

score 2 · Answer 2 · edited May 23 '17 at 12:08

2

If you think the visibility is fine, try JSFiddle:

.entry-header .entry-title {
    visibility: hidden;
}
.entry-header .entry-title::after {
    content: "Create Theme" !important;
    visibility: visible;
}

The problem is that the text entry-title will still occupy the space.

Reference: Hide element, but show CSS generated content

edited May 23 '17 at 12:08

Community

1
1

answered Aug 25 '16 at 11:40

Joy

9,430
11
44
95

Hide some text through CSS

2 Answers2