将 CSS 样式应用于特定元素之前或之后的文本内容

Question

给定以下 HTML 标记：

<li class="lrn-text-word-wrap" tabindex="-1" data-selector="suggested-tag">
  12345: <strong>Han</strong> Solo
</li>

是否可以仅 css 应用样式 来删除 12345: 文本内容？

我无法控制标记，因此无法在那里进行更改，真的不想求助于 JS。

我在这里想要实现的是使用 CSS 只显示单词“Han Solo”而不是“12345：Han Solo”

 标签只包含“Han”的原因是这是自动完成的一部分，用户输入的是“Hans”。标记显示匹配结果，突出显示用户键入的文本，即很好，但我需要能够隐藏“关键”部分。

我整理了以下 SCSS，但这只允许  文本保留，而我们还需要显示  之后的所有内容。

[data-selector='suggested-tag'] { font-size: 0px strong { font-size: 12px; } }

或者，如果有办法 select 通过 CSS 仅文本节点，这可能就足够了。

任何关于如何解决这个问题的建议都将非常受欢迎！

Answer 1

您可以尝试使用网格布局并将第一列设置为 0 并将 background 设置为 strong 元素以隐藏从第一列溢出的内容。

说明：网格会将文本的每一部分包裹在一个虚拟单元格中。如果 html 个标签位于文本中，它将产生同样多的部分。

您的示例将生成 3 个单元格，1 个虚拟单元格用于站在  标签前面的文本，第二个元素将是  标签本身，第三个（虚拟）将是文本站在  标签后面。

思路如下：

ul,
li {
  margin: 0;
  padding: 0;
  list-style:none;
}

li.grid {
  display: grid;
  grid-template-columns: 0 repeat(2, minmax(3em, max-content));
  justify-content: start;
  background: lightgray;
}

.grid strong {
  background: inherit;
  padding:0 0.2em;
  text-align: right
}

<ul>
  <li class="grid"> 12345: <strong>Han</strong> Solo</li>
  <li> 12345: <strong>Han</strong> Solo</li>
</ul>

编辑下面评论的案例

... We know that there will always be a : ...

届时将需要

Javascript 即时删除不需要的文本部分。

举个例子。

let lis = document.querySelectorAll('ul li');
[...lis].forEach((txtCntnt) => {
  let content= txtCntnt.innerHTML;
  content = content.substring(content.indexOf(":") + 1);
  txtCntnt.innerHTML=content;
});

strong{color:purple}

<ul>
  <li> 12345 keep that han hu!: Han<strong> Sol</strong>o</li>
  <li> 12345 of any lenght: <strong>Han</strong> Solo</li>
</ul>

将 CSS 样式应用于特定元素之前或之后的文本内容

Apply CSS styling to text content either before or after a specific element

css

sass