Css ：：after 不显示与使用 Twig 应用的链接文本相同的行

问：

问题：

我正在尝试在使用 twig 和 ：：after CSS 函数的 Drupal 8 站点上自动向链接文本的末尾添加一些内容。像这样：

    &::after {
     content: '!!!!';
}

虽然内容是在页面上输出的，但当显示设置为“display=block”时，它会被添加到下一行。换句话说，Chrome 控制台中的 html 如下所示：

::before
<div>
     a Twig output <a href=”http://link>Link Title Text</a> 
</div>
::after

看起来像：

Link Title Text
Continuation of Link Title Text
!!!!

我希望输出看起来像：

Link Title Text
Continuation of Link Title Text!!!!

我最接近弄清楚的是将显示更改为“display： inline-flex”。如果标题文本只在一行上，这可能工作正常。但是，链接的标题文本通常需要 2 行（或更多）行，因此在这种情况下，结果是：

Link Title Text             !!!!
Continuation of  Link Title Text

而不是想要的：

Link Title Text
Continuation of Link Title Text!!!!

更复杂的是，我注意到从“display： block”更改为“display： inline-flex”在上方和下方添加了额外的间距，这对页面的样式不起作用。

我假设：：after被应用于'href='，而不是链接的标题。是否可以将 ：：after 应用于链接的标题文本而不是“href=”链接以获得所需的结果？

与 Twig 相关的 Twig 代码如下所示：

<div>{% for linktitle in linktitle_arr %}<a {{ attributes.addClass(link_classes) }} href="{{url_}}">{{linktitle.value}}</a>{% endfor %}</div>

任何见解都非常感谢。

• 更新 - 解决方案 - 更新 -

只是想用我的发现以及我如何“解决”这个问题来更新这篇文章。

问题最终并没有像我最初怀疑的那样出在 Twig 身上。这是一个“明确修复的黑客”问题。如果您不熟悉代码/hack，则代码如下所示：

@mixin clearfix() {
  &:before,
  &:after {
    content: " "; // 1
    display: table; // 2
  }
  &:after {
    clear: both;
  }

问题的根源是使用了“display： table”，它将附加的伪元素“在”父元素的“下方”放入新列中，而不是像预期的那样沿着同一行，正如我最初的问题中所描述的那样。

如果您遇到此问题并使用 clear-fix，则必须针对您的特定用例对其进行修改。就我而言，我解决了这个问题，同时提出了要处理的新问题，这些问题超出了此更新的范围。打地鼠。

还应该注意的是，在我的特定情况下，有问题的页面是基于 Bootstrap 3 子主题构建的自定义主题。Bootstrap 本身利用了完整的清除修复代码，但是，在 Drupal 核心深处还有一个修改版本，它也影响了 ：after 伪元素的正确预期功能。

您可以在以下位置找到 Drupal 核心清除修复程序：

/core/modules/system/css/components/clearfix.module.css