There is no longer any point in this PR as with bootstrap 5 we will change to use -start and -end so there will be no need for this separate RTL css

Let’s wait bs5 is merged to see if we need this, modified, or not.

I am now using 4.0-dev with bs5.
The situation is the same and this PR is needed to solve the issue.
The code we get for LTR or RTL is the same after npm ci, i.e.

a[target=_blank]::before {
  padding-right: 3px;
  font-family: "Font Awesome 5 Free";
  font-size: 14px;
  font-weight: 900;
  content: "";
}

nothing rtl specific.

The start, end parts that Brian talks about is something like: padding-right: 3px; ==> padding-block-end: 3px; Therefore the re is no need for ltr->rtl...

ok, for that. We would need to modify but where is that css coming from? There is no scss equivalent.

Second
the main issue here is the ::before and ::after which afaik have noting to do with bootstrap bs5 rtl (if it is already present in code)

ALL the rtl scss that we have needs to be reviewed to see if it is even needed now.

As well as the start/end stuff there is also magic taking process when the compilation takes place. Bootstrap 5 uses rtlcss methodology which provides magic transformations and the use of rtl variables if necessary.

We should end up with nothing in the template-rtl.scss file

magic

This css

.list-group .published {
    padding-left: .9rem;
    border-left: 5px solid var(--success);
}

will magically be written in the template-rtl.css file as

.list-group .published {
    padding-right: .9rem;
    border-right: 5px solid var(--success);
}

Variables

h1 {
  font-weight: 700 /* rtl:600 */;
}

will be written in the template-rtl.css file as

h1 {
  font-weight: 600;
}

I suspect that we will be able to completely remove the template-rtl.scss file eventually.

You are not responding to my specific question above

#32101 (comment)

EDIT: I found the scss where is the padding-left in _global.scss
But we will still need a specific rtl to use ::after instead of ::before
and this means we can't use the padding trick with bs5 in this specific case

The code we get for LTR or RTL is the same after npm

The build tools need to be updated see #32113

what would be the directive (if there is one) for before/after?
I mean what can be used in/*rtl:????*/

If the string maps for rtlcss are correct then it can be done magically to swap ::before to ::after

I think Brian is right that it is the strategic way we need to go. But the RTLCSS stuff is going to have to be a big bang. So for now I'm going to keep merging the RTL specific PRs until we're closer to having something ready to merge on that front

Actually this wasn't needed at all. Even without the rtlcss stuff the PR is wrong and not needed. This PR should be reverted as a New PR incoming.

The problem is that the icon should still be BEFORE the text but the code was not correct.

Please see #32120