内联链接中的换行符末尾带有图标（css）

Question

我在文本中使用了一些锚标记。 他们应该有以下要求：

• 链接可以是多行的，并且应该正确中断（换行文本之间没有中断）
• 最后的图标不应单独中断（与锚中的最后一个词一起）

我写了一个简单的代码笔来显示问题：https://codepen.io/markus-burda/pen/wvPrpXw

当我将 .link 上的 display: inline 更改为 inline-block 时，锚标记中的最后一个单词会正确换行，但锚会换行：

当我让它显示时：将链接单独包装在下一行后的伪元素内联：

您是否有同时解决这两个问题的想法？

.wrapper {
  width: 400px;
}

.link {
  color: blue;
  display: inline;
  padding-right: 0.6em;
}

.link::after {
  content: "";
  margin-right: -0.6em;
  height: 0.6em;
  margin-left: 0.25em;
  top: -0.3em;
  width: 0.6em;
  background-color: currentColor;
  display: inline-block;
  position: relative;
}

<p class="wrapper">In der Vorweihnachtszeit kaufen sich viele Menschen vermeintlich eine <a href="#" class="link">Denn dann würde am Ende nicht viel Badevergnügen bleiben. Sie bräuchten eine Dusche nach dem Bad und die Wanne eine längere Säuberungsaktion, wie kraut&rüben berichtet.</a>.
  Denn es gibt einen Unterschied zwischen dem Ritterstern (Hippeastrum)&nbsp;und der Echten Amaryllis&nbsp;(Belladonnalilie), optisch ist der für Laien aber kaum auszumachen. Auch, weil die Echte Amaryllis nur selten im Handel zu finden ist. Das sind
  die Eigenschaften beider Pflanzen:</p>
<p class="wrapper">In der Vorweihnachtszeit kaufen sich viele Menschen vermeintlich eine <a href="#" class="link">Kurzer Link</a>. Denn es gibt einen Unterschied zwischen dem Ritterstern (Hippeastrum)&nbsp;und der Echten Amaryllis&nbsp;(Belladonnalilie), optisch ist der
  für Laien aber kaum auszumachen. Auch, weil die Echte Amaryllis nur selten im Handel zu finden ist. Das sind die Eigenschaften beider Pflanzen:</p>
<p class="wrapper">In der Vorweihnahjjzeit kaufen sich viele Menschen Menschen Menschen Mens antlich eine <a href="#" class="link">Umbrder langer Link</a>. Denn es gibt einen Unterschied zwischen dem Ritterstern (Hippeastrum)&nbsp;und der Echten Amaryllis&nbsp;(Belladonnalilie),
  optisch ist der für Laien aber kaum auszumachen. Auch, weil die Echte Amaryllis nur selten im Handel zu finden ist. Das sind die Eigenschaften beider Pflanzen:</p>
<p class="wrapper">In der Vorweihnahjjzeit kaufen sich viele Menschen Menschen Menschen Mens antlich eine <a href="#" class="link">Umbrechender langer Link</a>. Denn es gibt einen Unterschied zwischen dem Ritterstern (Hippeastrum)&nbsp;und der Echten Amaryllis&nbsp;(Belladonnalilie),
  optisch ist der für Laien aber kaum auszumachen. Auch, weil die Echte Amaryllis nur selten im Handel zu finden ist. Das sind die Eigenschaften beider Pflanzen:</p>

Answer 1

当元素本身是display: inline 时，将display: inline-block 用作::after 伪元素会有点问题。我不确定您是否可以通过这种方式获得一致的布局结果。

玩了一下你的 codepen，我试图找到一种方法来实现类似的东西，同时保持它display: inline。明显的问题是您不能为内联元素设置宽度，我的解决方案是使用不间断空格（"\00a0"）、等宽字体和word-spacing。仅在 Chrome 上测试。

.link::after {
    content: "\00a0";
    word-spacing: 0.6em;
    font-family: monospace;
    background-color: currentColor;
}

可运行版本，基于原帖中的代码：

.wrapper {
  width: 400px;
}

.link {
  color: blue;
  display: inline;
  padding-right: 0.6em;
}

.link::after {
    content: "\00a0";
    word-spacing: 0.6em;
    font-family: monospace;
    margin-right: -0.6em;
    margin-left: 0.25em;
    top: -0.3em;
    background-color: currentColor;
    position: relative;
}

<p class="wrapper">In der Vorweihnachtszeit kaufen sich viele Menschen vermeintlich eine <a href="#" class="link">Denn dann würde am Ende nicht viel Badevergnügen bleiben. Sie bräuchten eine Dusche nach dem Bad und die Wanne eine längere Säuberungsaktion, wie kraut&rüben berichtet.</a>.
  Denn es gibt einen Unterschied zwischen dem Ritterstern (Hippeastrum)&nbsp;und der Echten Amaryllis&nbsp;(Belladonnalilie), optisch ist der für Laien aber kaum auszumachen. Auch, weil die Echte Amaryllis nur selten im Handel zu finden ist. Das sind
  die Eigenschaften beider Pflanzen:</p>
<p class="wrapper">In der Vorweihnachtszeit kaufen sich viele Menschen vermeintlich eine <a href="#" class="link">Kurzer Link</a>. Denn es gibt einen Unterschied zwischen dem Ritterstern (Hippeastrum)&nbsp;und der Echten Amaryllis&nbsp;(Belladonnalilie), optisch ist der
  für Laien aber kaum auszumachen. Auch, weil die Echte Amaryllis nur selten im Handel zu finden ist. Das sind die Eigenschaften beider Pflanzen:</p>
<p class="wrapper">In der Vorweihnahjjzeit kaufen sich viele Menschen Menschen Menschen Mens antlich eine <a href="#" class="link">Umbrder langer Link</a>. Denn es gibt einen Unterschied zwischen dem Ritterstern (Hippeastrum)&nbsp;und der Echten Amaryllis&nbsp;(Belladonnalilie),
  optisch ist der für Laien aber kaum auszumachen. Auch, weil die Echte Amaryllis nur selten im Handel zu finden ist. Das sind die Eigenschaften beider Pflanzen:</p>
<p class="wrapper">In der Vorweihnahjjzeit kaufen sich viele Menschen Menschen Menschen Mens antlich eine <a href="#" class="link">Umbrechender langer Link</a>. Denn es gibt einen Unterschied zwischen dem Ritterstern (Hippeastrum)&nbsp;und der Echten Amaryllis&nbsp;(Belladonnalilie),
  optisch ist der für Laien aber kaum auszumachen. Auch, weil die Echte Amaryllis nur selten im Handel zu finden ist. Das sind die Eigenschaften beider Pflanzen:</p>