Question

我正在通过WordPress在网站上工作，出于某种原因，我可以编辑CSS但不能编辑HTML，我想隐藏一些文字，但不是全部。代码是：

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

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

显示：Create CourseCreate Theme。我希望它显示：Create Theme。这可以通过CSS吗？

Answer 1

这可能是一个有点丑陋的黑客，但考虑到你的情况如果你不能修改你可以用text-indent来隐藏原始文本的HTML，然后通过设置覆盖父级的text-indent display: block;像这样的after伪元素：

.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>

Answer 2

如果您认为visibility没问题，请尝试JSFiddle：

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

问题是文本entry-title仍会占据空间。

参考：Hide element, but show CSS generated content

通过CSS隐藏一些文本

2 个答案: