Probleme mit Positionierung von Pseudo-Element

[heinetz]

Hallo Forum,

in meinem Design wird über jeder Headline ein kurzer Strich mit einer festen Länge angezeigt.

Den habe ich, wie folgt, als Pseudo-Element umgesetzt:

  &:before{
    content : "";
    display:block;
    border-top: 2px solid get-color(dark-soft);
    width: 53px;
    position: static;
    height: 0;
    margin-bottom: 20px;

... und der Strich wird, ensprechend den Texten, linksbündig angezeigt. In einem anderen Fall werden die Headlines aber nicht linksbündig, sondern zentriert angezeigt. Siehe hier

Die Zentrierung der Texte erfolgt über ein align-items: center; des umschliessenden Containers. In diesem Fall sollte der kurze Strich eigentlich auch zentriert dargestellt werden. Ich wüsste zwar wie ich den Strich zentriert darstelle aber ich habe keine Idee, wie ich das in Abhängigkeit von der Ausrichtung der Headlines hinbekommen soll. Sprich, ihc müsste den Strich so definieren, dass er linksbündig dargestellt wird, wenn die Headline linksbündig dargestellt wir und zentriert darstellen, wenn die Headline zentriert ist.

Hat jemand eine Idee?

1000 Dank und

beste gruesse, heinetz