How to prevent an :after pseudo element from line break?-CodePudding

I want to attach a pseudo :after element to external links right after the link itself but I cannot make it work in the same line:

a:not([href*="domain"])::after {
  /*CSS for external links */
  content: url(data:image/svg xml;charset=utf-8,);
  position: relative;
  top: -3px;
  margin: 0 1px 0 3px;
}

<a href="https://de.m.wikipedia.org/wiki/Datei:Young_people_in_Hong_Kong_using_smartphones_whilst_walking.png" class="nomark">
  <figcaption class="img-caption text-center !my-0 !py-0">
    Young people in Hong Kong using smartphones whilst walking </figcaption>
</a>

Here is a JSFiddle link to see it "live".

CodePudding user response：

Set display:inline-block for figcaption because it's default property is set to display:block so it will tend to take full width

a:not([href*="domain"])::after {
  /*CSS for external links */
  content: url(data:image/svg xml;charset=utf-8,);
  position: relative;
  top: -3px;
  margin: 0 1px 0 3px;
}

figcaption {
  display: inline-block;
}

<a href="https://de.m.wikipedia.org/wiki/Datei:Young_people_in_Hong_Kong_using_smartphones_whilst_walking.png" class="nomark">
  <figcaption class="img-caption text-center !my-0 !py-0">
    Young people in Hong Kong using smartphones whilst walking </figcaption>
</a>

Or set the pseudo element's position to absolute making a its relative parent

a {
  position: relative;
  display: inline-block;
}

a:not([href*="domain"])::after {
  /*CSS for external links */
  content: url(data:image/svg xml;charset=utf-8,);
  position: absolute;
  top: -3px;
  right: -17px;
  margin: 0 1px 0 3px;
}

<a href="https://de.m.wikipedia.org/wiki/Datei:Young_people_in_Hong_Kong_using_smartphones_whilst_walking.png" class="nomark">
  <figcaption class="img-caption text-center !my-0 !py-0">
    Young people in Hong Kong using smartphones whilst walking </figcaption>
</a>

CodePudding user response：

Flexbox can do that:

a:not([href*="domain"])::after {
  /*CSS for external links */
  content: url(data:image/svg xml;charset=utf-8,);
  margin: 0 1px 0 3px;
}

a {
  display: flex;
  align-items: center;
}

<a href="https://de.m.wikipedia.org/wiki/Datei:Young_people_in_Hong_Kong_using_smartphones_whilst_walking.png" class="nomark">
  <figcaption class="img-caption text-center !my-0 !py-0">
    Young people in Hong Kong using smartphones whilst walking </figcaption>
</a>