::after pseudo-element not working with external links

tonra
Posts: 11
Joined: Wed Jun 05, 2019 10:39 am
Location: Germany

::after pseudo-element not working with external links

Post by tonra » Wed Oct 09, 2019 8:11 pm

Hello,

I am currently facing the following problem:
Whenever I try to add an ::after pseudo-element to link elements, it works only for internal links.
This means

Code: Select all

*[class ~= "topic/xref"][href]::after,
*[class ~= "topic/link"][href]::after {
  content: "TEST" !important;
}
has absolutely no effect on external links but only on internal ones.
With a ::before pseudo-element, the property works for external links.

When I use

Code: Select all

a::after {
    content: "TEST"
}
it works for every <a> element except for external links.
I have no explanation for this behavior since both – internal and external links – are "normal" <a> elements.
I've also tried to address the external links with *[scope ~= "external"] but hadn't success either.
The problem doesn't only occur in the PDF output but also in the merged HTML file.

I'm grateful for any help.

Best regards,
Anton

Dan
Posts: 416
Joined: Mon Feb 03, 2003 10:56 am

Re: ::after pseudo-element not working with external links

Post by Dan » Thu Oct 10, 2019 11:28 am

Hello Anton,

This is caused by a series of built-in CSS selectors that remove the "on page" text that appears after the link text (in case of external links) and are quite specific.
The solution is to increase the specificity of your selector, like:

Code: Select all

*[class ~= "topic/xref"][href]::after,
*[class ~= "topic/link"][href]::after,
*[class ~= "topic/xref"][href][scope="external"][format]::after,
*[class ~= "topic/link"][href][scope="external"][format]::after {
  content: "TEST" !important;
}
Hint: When you get into similar situations, you can use the CSS inspector from the browser and try to modify your selectors directly.
https://www.oxygenxml.com/doc/versions/ ... ng_the_css

Many regards,
Dan

Costin
Posts: 603
Joined: Mon Dec 05, 2011 6:04 pm

Re: ::after pseudo-element not working with external links

Post by Costin » Thu Oct 10, 2019 11:57 am

Hi Anton,

This is a specificity issue.

More exactly, in the default CSS file that styles the links in the PDF output (p-links.css) there is a selector which has a higher specificity than the selector you are using in your customization CSS.
Whenever your CSS customization seems to not apply on the output, you should use the technique described in the Debugging the CSS section from the DITA-OT CSS Publishing to PDF Plugin User-Guide in order to better notice which styles are applied over a specific element from the output PDF (which properties apply over the intermediary HTML file) and thereupon decide which selectors you could use to override the ones coming from the styles defined by the default CSS files that oXygen comes bundled with.

If you use your internet browser's inspector, in this case, you may notice there is a kinda specific selector in the "p-links.css" file that matches links and removes any content after them, using the ::after pseudo-element, as well as the "!important" marker.
So all you should do in your customization CSS is to use a selector that has the same or higher specificity with the default one and also use the "!important" marker for your properties.

I.e:

Code: Select all

*[class~="xref"][href]::after, *[class~="xref"][href][format]:not([format="dita"])::after, a[href]::after{
    content: "TEST" !important;
}
I hope this helps.

L.E: I noticed that Dan also replied as I was typing, so, as both selector suggestions work, it seems you now have some solutions and explanations on how the CSS debugging should be performed. :)

Regards,
Costin
Costin Sandoi
oXygen XML Editor and Author Support

tonra
Posts: 11
Joined: Wed Jun 05, 2019 10:39 am
Location: Germany

Re: ::after pseudo-element not working with external links

Post by tonra » Mon Oct 14, 2019 12:04 pm

Hi Dan and Costin,

Thanks a lot – it works like a charm now. As always, one can rely on this forum.

Since there was no ::after pseudo-element in the browser's inspector, I was blind to the selector in "p-links.css"…

Best regards,
Anton

Post Reply