CODEWITHSUNDEEP
htmlcsspseudo-element
Peleke
Peleke

Reputation: 961

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

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,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2210%22%20height%3D%2211%22%20viewBox%3D%220%200%2010%2011%22%3E%3Cpath%20d%3D%22M4.5%203.5h-4v6h6v-4%22%20fill%3D%22transparent%22%20stroke%3D%22%23ff5b5e%22%2F%3E%3Cpath%20d%3D%22M4.5.5h5v5L9%206%207.5%204.5l-3%203-2-2%203-3L4%201z%22%20fill%3D%22transparent%22%20stroke%3D%22%23ff5b5e%22%20stroke-width%3D%221.001%22%2F%3E%3C%2Fsvg%3E);
  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>

enter image description here

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

Upvotes: 0

Views: 294

Answers (2)

Paulie_D
Paulie_D

Reputation: 114991

Flexbox can do that:

a:not([href*="domain"])::after {
  /*CSS for external links */
  content: url(data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2210%22%20height%3D%2211%22%20viewBox%3D%220%200%2010%2011%22%3E%3Cpath%20d%3D%22M4.5%203.5h-4v6h6v-4%22%20fill%3D%22transparent%22%20stroke%3D%22%23ff5b5e%22%2F%3E%3Cpath%20d%3D%22M4.5.5h5v5L9%206%207.5%204.5l-3%203-2-2%203-3L4%201z%22%20fill%3D%22transparent%22%20stroke%3D%22%23ff5b5e%22%20stroke-width%3D%221.001%22%2F%3E%3C%2Fsvg%3E);
  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>

Upvotes: 1

Viira
Viira

Reputation: 3911

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,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2210%22%20height%3D%2211%22%20viewBox%3D%220%200%2010%2011%22%3E%3Cpath%20d%3D%22M4.5%203.5h-4v6h6v-4%22%20fill%3D%22transparent%22%20stroke%3D%22%23ff5b5e%22%2F%3E%3Cpath%20d%3D%22M4.5.5h5v5L9%206%207.5%204.5l-3%203-2-2%203-3L4%201z%22%20fill%3D%22transparent%22%20stroke%3D%22%23ff5b5e%22%20stroke-width%3D%221.001%22%2F%3E%3C%2Fsvg%3E);
  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,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2210%22%20height%3D%2211%22%20viewBox%3D%220%200%2010%2011%22%3E%3Cpath%20d%3D%22M4.5%203.5h-4v6h6v-4%22%20fill%3D%22transparent%22%20stroke%3D%22%23ff5b5e%22%2F%3E%3Cpath%20d%3D%22M4.5.5h5v5L9%206%207.5%204.5l-3%203-2-2%203-3L4%201z%22%20fill%3D%22transparent%22%20stroke%3D%22%23ff5b5e%22%20stroke-width%3D%221.001%22%2F%3E%3C%2Fsvg%3E);
  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>

Upvotes: 1

Related Questions