用纯 CSS 替换内容
Replace content with pure CSS
背景：
我正在尝试找到一种方法，用纯 CSS 替换或交换一些 旧内容 和一些 新内容 .我找到了一种 可行的方法 但我想改进它。
我决定使用 pseudo-elements, negative margins, and z-index 的组合来执行以下操作
- 使用
color:transparent 隐藏旧内容
在content:属性里面添加新内容
伪元素:after
通过给它一个 color
color:transparent
- 使用negative
margin-left带上:after的内容
元素 - 新内容 - 在现在透明的 旧内容之上
content <~ 我的问题是关于这一点的。
最终结果是新内容 完美地位于旧透明内容之上并且真正融合嗯。旧内容 - 在我的例子中是一个 <a> 元素 - 仍然按预期运行。
一般问题：
在寻找最好的方法来找出多少负值 margin-left 以便更系统地使用时，我发现最好的方法是将负值边距设置为与 [= 的长度相匹配95=]旧内容 有意义。
CSS有这样的事情。
我发现有一个 CSS 长度单位被称为 ch 并且它有不错的 cross browser support
MDN 说：
[ch] Represents the width, or more precisely the advance measure, of the glyph '0' (zero, the Unicode character U+0030) in the element's font.
具体问题
我的理解是，并非字体中的所有字符都具有与该字体的字形“0”相同的宽度，如果确实如此，那么我不明白为什么会出现以下情况：
名称 Stack Overflow 是 13 个字母 + 1 个空 space 长 （总共 14 个） 这是 14ch 宽旁边的样子元素
span:nth-child(2) {
width: 14ch;
height: 20px;
background: red;
display: block;
}
<span>Stack Overflow</span>
<span></span>
所有这些与我的问题有什么关系：
如果1ch的尺寸实际上相当于字体中1个字符的宽度，那么我会简单地计算我的旧内容[=119=中有多少个字符] 并将其用作 新内容
的负边距
在我看来并非如此，所以我的...
问题
在我的案例中，如何提高 ch 的准确性。在这里改进它还包括使用完全不同的方法 - 如果需要的话，比如 calc()。
期望的效果：
计算旧内容长度的直观方法，这样我就可以轻松计算出要添加到新内容[=119=的负边距多少]
限制：
还有许多其他方法可以做到这一点。我经历了所有这些努力，让事情保持 纯粹 CSS
代码：
为了方便起见，我已经设置了一个模拟不同场景的沙箱：
/* 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;
}
<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>
注意：这段代码仅适用于 Firefox。
a::before {
content: "New fancy content2e";
position: relative;
top: 100000px;
white-space: pre-wrap;
margin-right: -1000px;
}
a::after {
content: "2d";
}
a {
position: relative;
top: -100000px;
}
a::before {
content: "New fancy content2e";
position: relative;
top: 100000px;
white-space: pre-wrap;
margin-right: -1000px;
}
a::after {
content: "2d";
}
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;
}
<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>
我要做的不是让旧内容透明，而是将其字体大小设置为0。这样你就不必为新内容计算左边距了。
/* 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;
}
<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>
注意：此方法的缺点是需要知道 的原始字体大小。我在这里假设 1rem，但您必须将其更改为实际大小。
背景：
我正在尝试找到一种方法，用纯 CSS 替换或交换一些 旧内容 和一些 新内容 .我找到了一种 可行的方法 但我想改进它。
我决定使用 pseudo-elements, negative margins, and z-index 的组合来执行以下操作
- 使用
color:transparent隐藏旧内容
在
content:属性里面添加新内容 伪元素:after通过给它一个
color 覆盖伪元素的 - 使用negative
margin-left带上:after的内容 元素 - 新内容 - 在现在透明的 旧内容之上 content <~ 我的问题是关于这一点的。
color:transparent
最终结果是新内容 完美地位于旧透明内容之上并且真正融合嗯。旧内容 - 在我的例子中是一个 <a> 元素 - 仍然按预期运行。
一般问题：
在寻找最好的方法来找出多少负值 margin-left 以便更系统地使用时，我发现最好的方法是将负值边距设置为与 [= 的长度相匹配95=]旧内容 有意义。
CSS有这样的事情。
我发现有一个 CSS 长度单位被称为 ch 并且它有不错的 cross browser support
MDN 说：
[ch] Represents the width, or more precisely the advance measure, of the glyph '0' (zero, the Unicode character U+0030) in the element's font.
具体问题
我的理解是，并非字体中的所有字符都具有与该字体的字形“0”相同的宽度，如果确实如此，那么我不明白为什么会出现以下情况：
名称 Stack Overflow 是 13 个字母 + 1 个空 space 长 （总共 14 个） 这是 14ch 宽旁边的样子元素
span:nth-child(2) {
width: 14ch;
height: 20px;
background: red;
display: block;
}
<span>Stack Overflow</span>
<span></span>
所有这些与我的问题有什么关系：
如果1ch的尺寸实际上相当于字体中1个字符的宽度，那么我会简单地计算我的旧内容[=119=中有多少个字符] 并将其用作 新内容
在我看来并非如此，所以我的...
问题
在我的案例中，如何提高 ch 的准确性。在这里改进它还包括使用完全不同的方法 - 如果需要的话，比如 calc()。
期望的效果：
计算旧内容长度的直观方法，这样我就可以轻松计算出要添加到新内容[=119=的负边距多少]
限制：
还有许多其他方法可以做到这一点。我经历了所有这些努力，让事情保持 纯粹 CSS
代码：
为了方便起见，我已经设置了一个模拟不同场景的沙箱：
/* 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;
}
<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>
注意：这段代码仅适用于 Firefox。
a::before {
content: "New fancy content2e";
position: relative;
top: 100000px;
white-space: pre-wrap;
margin-right: -1000px;
}
a::after {
content: "2d";
}
a {
position: relative;
top: -100000px;
}
a::before {
content: "New fancy content2e";
position: relative;
top: 100000px;
white-space: pre-wrap;
margin-right: -1000px;
}
a::after {
content: "2d";
}
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;
}
<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>
我要做的不是让旧内容透明，而是将其字体大小设置为0。这样你就不必为新内容计算左边距了。
/* 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;
}
<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>
注意：此方法的缺点是需要知道 的原始字体大小。我在这里假设 1rem，但您必须将其更改为实际大小。