用纯CSS替换内容

Question

背景：

我正在尝试使用纯CSS替换或交换一些旧内容和一些新内容。我找到了工作的方法，但我想改进它。

我决定使用pseudo-elements，negative margins和z-index的组合来执行以下操作

1. 使用color:transparent
隐藏旧内容

2. 在<{1}}属性中添加新内容 伪元素content:

3. 为伪元素覆盖:after，为其提供color:transparent

4. 使用否定 color来显示margin-left的内容 元素 - 新内容 - 位于现在透明的 old之上 内容 ＆lt;〜我的问题是关于这一点。

最终结果是新内容 完全位于旧透明内容之上，并且非常好地融合。旧内容 - 我的案例中的:after元素 - 仍然按预期运行。

一般问题：

在寻找最佳方法来找出多少负<a>以使其更加系统化使用时我发现最好的设置负边距以匹配旧的长度内容这是有道理的。

CSS有这样的事情。

我发现有一个称为margin-left的CSS长度单位，它有不错的cross browser support

MDN说：

  

[ch]表示字形“0”的宽度，或者更确切地说是前进度量。 （零，Unicode字符U + 0030）在元素的字体中。

具体问题

我的理解是，并非字体中的所有字符都具有与字形相同的宽度＆＃39; 0＆＃39;该字体，如果他们确实这样做，那我就不明白为什么会发生以下情况：

名称Stack Overflow是13个字母+ 1个空格，长（总共14个）这里是ch宽元素旁边的样子

＆＃13;
＆＃13;
14ch
＆＃13;
span:nth-child(2) {
  width: 14ch;
  height: 20px;
  background: red;
  display: block;
}
＆＃13;
＆＃13;
＆＃13;

所有这些与我的问题有什么关系：

如果<span>Stack Overflow</span> <span></span>的测量值实际上等于字体中1个字符的宽度，那么我只计算旧内容中有多少个字符，并将其用作新内容的负余量

在我看来，它并非如此，所有这一切都是我的...

问题

在我的案例中，如何提高1ch的准确性。在这里改进它还包括使用完全不同的方法 - 如ch，如果需要发生什么。

期望的效果：

一种直观的方式来计算旧内容的长度，这样我就可以很容易地计算出添加到新内容的负余量

限制：

还有很多其他方法可以做到这一点。我经历了所有这些努力，以保持纯CSS

代码：

为了您的方便，我已经设置了一个模拟不同场景的沙箱：

＆＃13;
＆＃13;
calc()
＆＃13;
/* essential CSS */

.content a.swap {
  color: transparent;
}

a.swap:after {
  content: "New fancy Stuff";
  display: inline;
  margin-left: -10.8ch; /* <-- focus on this thing here */
  color: red
}


/* demo fluff */

a {
  color: red;
  text-decoration: none;
}

a:hover,
a.swap:hover:after {
  color: blue;
  text-decoration: underline;
}

a.swap:hover:after {
  color: blue !important;
  text-decoration: underline;
}

.content {
  width: 300px;
  text-align: left;
  margin: 2em auto;
}
＆＃13;
＆＃13;
＆＃13;

Answer 1

我所做的不是让旧内容透明，而是将其字体大小设置为0.然后您不必计算新内容的左边距。

＆＃13;

＆＃13;

/* essential CSS */

.content a.swap {
  font-size:0;
}

.content a.swap:after {
  content: "New fancy Stuff";
  display: inline;
  font-size: 1rem; /* Restore font size to what it would have been */
   /* margin-left: -14ch; */ /* not needed */
  color: red
}


/* demo fluff */

.content a {
  color: red;
  text-decoration: none;
}

.content a:not(.swap):hover,    /* changed to match new situation */
.content a.swap:hover:after {
  color: blue;
  text-decoration: underline;
}

.content {
  width: 300px;
  text-align: left;
  margin: 2em auto;
}

＆＃13;

<div class="content">
  <h4> No swap</h4><span>Lorem ipsum dolor sit amet, utinam libris ocurreret an mei. Case falli tibique cum id, qui unum erroribus vituperata ne. Eu mei paulo posidonium, ex fastidii recteque has. Blandit senserit eum ne, <a href="#">Old ugly stuff</a> at vel mollis deserunt liberavisse. Pro at timeam dignissim reprimique. Illum falli ei sed, eum in enim hinc recusabo, ex mei integre admodum.</span>
</div>

<hr>


<div class="content">
  <h4> Swap</h4><span>Lorem ipsum dolor sit amet, utinam libris ocurreret an mei. Case falli tibique cum id, qui unum erroribus vituperata ne. Eu mei paulo posidonium, ex fastidii recteque has. Blandit senserit eum ne, <a class="swap" href="#">old ugly stuff</a> at vel mollis deserunt liberavisse. Pro at timeam dignissim reprimique. Illum falli ei sed, eum in enim hinc recusabo, ex mei integre admodum.</span>
</div>

<hr>


<div class="content">
  <h4> No swap and partial wrap</h4><span>Lorem ipsum dolor sit amet, utinam libris ocurreret an mei. Case falli tibique cum id, qui unum erroribus vituperata ne. Eu mei paulo posidonium, ex fastidii recteque has. Blandit senserit eum ne,unum erroribus vituperata ne. Eu mei paulo posidonium erroribus  <a href="#">old ugly stuff</a> at vel mollis deserunt liberavisse. Pro at timeam dignissim reprimique. Illum falli ei sed, eum in enim hinc recusabo, ex mei integre admodum.</span>
</div>

<hr>

<div class="content">
  <h4> Swap and partial wrap</h4><span>Lorem ipsum dolor sit amet, utinam libris ocurreret an mei. Case falli tibique cum id, qui unum erroribus vituperata ne. Eu mei paulo posidonium, ex fastidii recteque has. Blandit senserit eum ne,unum erroribus vituperata ne. Eu mei paulo posidonium erroribus  <a class="swap" href="#">old ugly stuff</a> at vel mollis deserunt liberavisse. Pro at timeam dignissim reprimique. Illum falli ei sed, eum in enim hinc recusabo, ex mei integre admodum.</span>
</div>

<hr>


<div class="content">
  <h4> No swap and full wrap</h4><span>Lorem ipsum dolor sit amet, utinam libris ocurreret an mei. Case falli tibique cum id, qui unum erroribus vituperata ne. Eu mei paulo posidonium, ex fastidii recteque has. Blandit senserit eum ne,unum erroribus vituperata ne. Eu mei paulo posidonium erroribus qui unum <a href="#">old ugly stuff</a> at vel mollis deserunt liberavisse. Pro at timeam dignissim reprimique. Illum falli ei sed, eum in enim hinc recusabo, ex mei integre admodum.</span>
</div>

<hr>


<div class="content">
  <h4> Swap and full wrap</h4><span>Lorem ipsum dolor sit amet, utinam libris ocurreret an mei. Case falli tibique cum id, qui unum erroribus vituperata ne. Eu mei paulo posidonium, ex fastidii recteque has. Blandit senserit eum ne,unum erroribus vituperata ne. Eu mei paulo posidonium erroribus qui unum <a class="swap" href="#">old ugly stuff</a> at vel mollis deserunt liberavisse. Pro at timeam dignissim reprimique. Illum falli ei sed, eum in enim hinc recusabo, ex mei integre admodum.</span>
</div>

＆＃13;

＆＃13;

＆＃13;

注意：此方法的缺点是需要知道＆lt; a＆gt;的原始字体大小。是。我在这里假设1rem，但你必须将其改为实际大小。

Answer 2

注意：这段代码仅适用于Firefox。

a::before {
  content: "New fancy content\202e";
  position: relative;
  top: 100000px;
  white-space: pre-wrap;
  margin-right: -1000px;

}
a::after {
  content: "\202d";
}
a {
  position: relative;
  top: -100000px;
}

＆＃13;

＆＃13;

a::before {
      content: "New fancy content\202e";
      position: relative;
      top: 100000px;
      white-space: pre-wrap;
      margin-right: -1000px;
      
    }
    a::after {
      content: "\202d";
    }
    a {
      position: relative;
      top: -100000px;
    }
    
    

a {
  color: red;
  text-decoration: none;
}

a:hover,
a.swap:hover:after {
  color: blue;
  text-decoration: underline;
}

a.swap:hover:after {
  color: blue !important;
  text-decoration: underline;
}

.content {
  width: 300px;
  text-align: left;
  margin: 2em auto;
}

＆＃13;

<div class="content">
          <h4> No swap</h4><span>Lorem ipsum dolor sit amet, utinam libris ocurreret an mei. Case falli tibique cum id, qui unum erroribus vituperata ne. Eu mei paulo posidonium, ex fastidii recteque has. Blandit senserit eum ne, <a href="#">Old ugly stuff</a> at vel mollis deserunt liberavisse. Pro at timeam dignissim reprimique. Illum falli ei sed, eum in enim hinc recusabo, ex mei integre admodum.</span>
        </div>

        <hr>


        <div class="content">
          <h4> Swap</h4><span>Lorem ipsum dolor sit amet, utinam libris ocurreret an mei. Case falli tibique cum id, qui unum erroribus vituperata ne. Eu mei paulo posidonium, ex fastidii recteque has. Blandit senserit eum ne, <a class="swap" href="#">old ugly stuff</a> at vel mollis deserunt liberavisse. Pro at timeam dignissim reprimique. Illum falli ei sed, eum in enim hinc recusabo, ex mei integre admodum.</span>
        </div>

        <hr>


        <div class="content">
          <h4> No swap and partial wrap</h4><span>Lorem ipsum dolor sit amet, utinam libris ocurreret an mei. Case falli tibique cum id, qui unum erroribus vituperata ne. Eu mei paulo posidonium, ex fastidii recteque has. Blandit senserit eum ne,unum erroribus vituperata ne. Eu mei paulo posidonium erroribus  <a href="#">old ugly stuff</a> at vel mollis deserunt liberavisse. Pro at timeam dignissim reprimique. Illum falli ei sed, eum in enim hinc recusabo, ex mei integre admodum.</span>
        </div>

        <hr>

        <div class="content">
          <h4> Swap and partial wrap</h4><span>Lorem ipsum dolor sit amet, utinam libris ocurreret an mei. Case falli tibique cum id, qui unum erroribus vituperata ne. Eu mei paulo posidonium, ex fastidii recteque has. Blandit senserit eum ne,unum erroribus vituperata ne. Eu mei paulo posidonium erroribus  <a class="swap" href="#">old ugly stuff</a> at vel mollis deserunt liberavisse. Pro at timeam dignissim reprimique. Illum falli ei sed, eum in enim hinc recusabo, ex mei integre admodum.</span>
        </div>

        <hr>


        <div class="content">
          <h4> No swap and full wrap</h4><span>Lorem ipsum dolor sit amet, utinam libris ocurreret an mei. Case falli tibique cum id, qui unum erroribus vituperata ne. Eu mei paulo posidonium, ex fastidii recteque has. Blandit senserit eum ne,unum erroribus vituperata ne. Eu mei paulo posidonium erroribus qui unum <a href="#">old ugly stuff</a> at vel mollis deserunt liberavisse. Pro at timeam dignissim reprimique. Illum falli ei sed, eum in enim hinc recusabo, ex mei integre admodum.</span>
        </div>

        <hr>


        <div class="content">
          <h4> Swap and full wrap</h4><span>Lorem ipsum dolor sit amet, utinam libris ocurreret an mei. Case falli tibique cum id, qui unum erroribus vituperata ne. Eu mei paulo posidonium, ex fastidii recteque has. Blandit senserit eum ne,unum erroribus vituperata ne. Eu mei paulo posidonium erroribus qui unum <a class="swap" href="#">old ugly stuff</a> at vel mollis deserunt liberavisse. Pro at timeam dignissim reprimique. Illum falli ei sed, eum in enim hinc recusabo, ex mei integre admodum.</span>
        </div>

＆＃13;

＆＃13;

＆＃13;