与宿主文本元素重叠 ::after 和 ::before 伪元素答案

【问题标题】：Overlap ::after and ::before pseudo elements with hosting text element与宿主文本元素重叠 ::after 和 ::before 伪元素
【发布时间】：2019-07-05 11:25:33
【问题描述】：

更新：

我需要从文本中隐藏@@，但将其保留在 HTML 中。

我在 HTML 中有元素 - <mark>@@Text@@</mark> 并且基本上需要从文本的开头和结尾隐藏 @@。使用伪元素隐藏似乎很容易，但也需要从伪元素所在的位置移除空格和黄色背景。

mark {
  position: relative;
  color: red;
}

mark::before {
  content: '@@';
  position: absolute;
  color: yellow;
  left: 0;
}

mark::after {
  content: '@@';
  position: absolute;
  color: yellow;
  right: 0;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <mark>@@Some Text@@</mark> |
  <mark>@@Some Text@@</mark> |
  <mark>@@Some Text@@</mark>
</body>
</html>

上面的代码带来了这样的结果：

而我需要的是：

DEMO

附言您可以在演示中看到奇怪的行为 - 从 CSS 中删除一行，结果将与我的第一张图片一样。在 HTML 中输入一些东西，它会再次刹车。不知道为什么会发生这种情况，但如果可能的话，我也很想对此有所了解。

【问题讨论】：

你想用javascript删除所有@@吗？
请注意，它们在 Firefox 上没有被正确删除，您的伪元素和原始文本不在完全相同的位置，显示分散的红色像素。另外，我怀疑你能否在 CSS 中做到这一点。有人会想知道为什么你想要这些@@ 开始......
对我来说与 Chrome 中的 @Kaddath 相同。
抱歉，帖子已编辑。虽然，它运行不一样。无论如何-我想我很好地描述了我的问题。如果可能的话，我想用 CSS 删除它。谢谢
坦率地说，如果mark 元素从其内容中获取宽度，我认为您不会使用 CSS 来管理它。

标签： javascript html css pseudo-element

【解决方案1】：

在你所说的 cmets 中：

也许用 Javascript 来解决...？

我得到一个字符串，然后创建标记并设置innerhtm

最初我的解决方案（在下面的行下）是在收到时简单地删除它们，但你说你必须将它们保留在 HTML 中。

因此，您将它们包装在一个内联元素中并隐藏它们，例如：

mark.innerHTML = theString.replace(/</g, "&lt;")
                          .replace(/&/g, "&amp;")
                          .replace(/^@@|@@$/g, "<span class=at>$&</span>");

（前两个替换是标记< 和&，因此我们可以使用innerHTML。如果字符串意味着 包含HTML 标记，请删除它们。）

使用这个 CSS：

span.at {
    display: none;
}

（请注意，我假设这些@@ 仅出现在实际文本中，而不出现在属性值中。）

现场示例：

const theString = "@@SOME TEXT@@";

const mark = document.createElement("mark");
mark.innerHTML = theString.replace(/</g, "&lt;")
                          .replace(/&/g, "&amp;")
                          .replace(/^@@|@@$/g, "<span class=at>$&</span>");
document.body.appendChild(mark);

span.at {
    display: none;
}

原解决方案：

那么到目前为止，最好的办法是在您这样做时删除那些@：

mark.innerHTML = theString.replace(/^@@|@@$/g, "");

例子：

const theString = "@@SOME TEXT@@";

const mark = document.createElement("mark");
mark.innerHTML = theString.replace(/^@@|@@$/g, "");
document.body.appendChild(mark);

请注意，当您设置innerHTML 时，字符串会被读取为HTML，而不是纯文本。因此，如果“SOME TEXT”包含 HTML 中的特殊字符，但应按字面意思处理，则结果不会很好：

const theString = "@@<SOME TEXT>huh? where did the rest go?@@";

const mark = document.createElement("mark");
mark.innerHTML = theString.replace(/^@@|@@$/g, "");
document.body.appendChild(mark);

如果是这种情况，请显式创建一个文本节点：

mark.appendChild(document.createTextNode(theString.replace(/^@@|@@$/g, "")));

例子：

const theString = "@@<SOME TEXT>ah, there it is@@";

const mark = document.createElement("mark");
mark.appendChild(document.createTextNode(theString.replace(/^@@|@@$/g, "")));
document.body.appendChild(mark);

【讨论】：

@bigInt 将它们包裹在 span 中并隐藏跨度。
@bigInt - 这是提出问题的重要信息。

【解决方案2】：

以下解决方案是一个hack，应谨慎使用（或根本不使用......）

/* 1.8em is approximately the width of @@, adjust it if needed */

mark {
  position: relative;
  display: inline-block;
  text-indent:-1.8em;  /* Hide the @@ at the left*/
  margin-right:-1.8em; /* Reduce the width of @@ from the right*/
  overflow: hidden; /* Hide the overflow on the left*/
  vertical-align: middle;
  /* Color only the text*/
  background:
    linear-gradient(red,red) left/calc(100% - 1.8em) 100% no-repeat;
  -webkit-background-clip:text;
  background-clip:text;
  color: transparent;
}
/* Replace the yellow background */
mark:before {
  content:"";
  position:absolute;
  z-index:-1;
  top:0;
  left:0;
  right:1.8em;
  bottom:0;
  background:yellow;
}

<mark>@@Some Text@@</mark> |
<mark style="font-size:28px;">@@Some more Text@@</mark> |
<mark>@@Text@@</mark>

【讨论】：

"30px 大约是@@ 的宽度，如果需要可以调整" LOL "if"? :-) 不过做得很好。我也想到了一个保证金解决方案，但因为它太脆弱而没有费心去遵循它。正如您所说，“...谨慎使用（或根本不使用...）”仍然必须感谢您的努力。
@T.J.Crowder 这更多是为了学习一些技巧而不是在现实世界中使用它;)
谢谢，这看起来很有希望 :) 至少对于临时解决方案而言。虽然根据用户字体大小来拥有它也很好（那么可能还会涉及到 Javscript）
@bigInt 检查更新，它可以基于字体大小和 em 单位
谢谢，这实际上是我问的。现在我确定了 - 这是不可能的:)

【解决方案3】：

尝试使用 javascript

var str = document.getElementsByClassName('mark');

for(var i =0; i <= str.length; i++){
  var res = str[i].innerText.replace("@@", "");
    str[i].innerText = res.replace('@@','');
}

【讨论】：