Css ::after 与使用 Twig 应用的链接文本未显示在同一行上

Posted 2023-03-04

【中文标题】Css ::after 与使用 Twig 应用的链接文本未显示在同一行上

【英文标题】：Css ::after NOT displaying on same line for link text as applied using Twig

【发布时间】：2021-04-23 05:13:31

【问题描述】：

问题：

我正在尝试自动在 Drupal 8 站点上的链接文本末尾添加一些内容，该站点使用带有 ::after CSS 函数的 twig。比如：

    &::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)  target="_blank" 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 本身使用完整的 clear-fix 代码，但是，在 Drupal 核心内部还有一个修改版本，它也影响了 :after 伪元素的正确预期功能。

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

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

【参考方案1】：

你可以使用那个a标签的伪元素。

树枝：

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

CSS：

a::after 
  content: '!!!!';

演示： https://codepen.io/eliortabeka/pen/rNMPQRP

应该做的工作。

【讨论】：

感谢您的参与。我曾希望它会像您想象的那样简单，但在这个网站上理论上的任务似乎越简单，结果恰恰相反.检查上面的最终解决方案和解释。