The problem:
I’m trying to automate adding something to the end of the link text on a Drupal 8 site that uses twig with the ::after CSS function. Something like:
&::after {
content: '!!!!';
}
Although the content is being outputted on the page it is being added on the next line when the display is set to ‘display=block’. In other words the html in the Chrome console looks like:
::before
<div>
a Twig output <a href=”http://link>Link Title Text</a>
</div>
::after
And looks like:
Link Title Text
Continuation of Link Title Text
!!!!
What I’d like the output to look like is:
Link Title Text
Continuation of Link Title Text!!!!
The closest I’ve gotten to figure this out is to change the display to ‘display: inline-flex’. This might work ok if the Title Text were only on one line. HOWEVER, the title text to the links often take 2 (or more) lines so the result in that case is:
Link Title Text !!!!
Continuation of Link Title Text
Instead of the desired:
Link Title Text
Continuation of Link Title Text!!!!
To complicate things I noticed that changing from ‘display: block’ to ‘display: inline-flex’ added addition spacing above and below that will not work for the styling of the page.
I’m assuming that the ::after is being applied to the ‘href=’ and not the title of for the link. Is it possible to apply the ::after to the title text of the link instead of the ‘href=’ link to get the desired outcome?
The Twig relevant Twig code looks something like this:
<div>{% for linktitle in linktitle_arr %}<a {{ attributes.addClass(link_classes) }} target="_blank" href="{{url_}}">{{linktitle.value}}</a>{% endfor %}</div>
Any insight is much appreciated.
- UPDATE - SOLUTION - UPDATE -
Just wanted to update this post with what I discovered and how I ‘solved’ this.
The problem didn’t end up being with Twig as I had originally suspected. This is a ‘clear-fix hack’ issue. If you are not familiar the code/hack looks like this:
@mixin clearfix() {
&:before,
&:after {
content: " "; // 1
display: table; // 2
}
&:after {
clear: both;
}
The root of the problem is the use of ‘display: table’ which drops the attached pseudo element ‘below’ the parent element into a new column, rather than along the same row, as expected, and as described above in my original question.
If you run into this issue and you use clear-fix you’ll have to modify it for your particular use-case. In my case I solved this while raising new issues to deal with as a result which are outside the scope of this update. Whack-a-mole.
It should also be noted that in my particular case the page in question is a custom theme built on a Bootstrap 3 sub-theme. Bootstrap itself utilizes the full clear-fix code, HOWEVER, there is also a modified version of it deep inside Drupal core that was influencing the proper expected function of the :after pseudo element as well.
You can find the Drupal core clear-fix at:
/core/modules/system/css/components/clearfix.module.css
