fix(site): hide external link arrow when anchor wraps an image (#3165)

* fix(site): hide external link arrow when anchor wraps an image

The external-link arrow rendered by a[target='_blank']::after was
appearing alongside image-only links (screenshots, badges like the
AWS "Launch Stack" button), producing a redundant indicator next to
content that already conveys the target.

Scope the pseudo-element to anchors that do not contain an <img> using
:not(:has(img)), and document the behavior in docs/syntax/links.md.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

* docs: add Linked images example under Links

Demonstrate the image-in-link markdown pattern and explain that the
external-link arrow is suppressed when the anchor wraps an image.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

* docs: render a live linked-image example under Links

Use the existing bear.png asset and example.com as the destination
so readers can see the image-wrapped link (and verify the arrow
indicator is omitted) without external dependencies.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

---------

Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Author: theletterf

docs/syntax/links.md

@@ -111,6 +111,22 @@ Link to websites and resources outside the Elastic docs:
 [Elastic Documentation](https://www.elastic.co/guide)
 ```
 
+External links display an arrow indicator next to the link text.
+
+### Linked images
+
+Wrap an image in a link to make the image itself clickable. Combine the image syntax with the link syntax:
+
+```markdown
+[![A bear](/syntax/images/bear.png "bear =300x")](https://example.com)
+```
+
+Rendered:
+
+[![A bear](/syntax/images/bear.png "bear =300x")](https://example.com)
+
+When an external link wraps an image (for example, a screenshot or badge), the arrow indicator is omitted because the image already conveys the target.
+
 ### Autolinks
 
 Bare `https://` URLs in text are automatically converted to clickable links.

src/Elastic.Documentation.Site/Assets/markdown/typography.css

@@ -51,7 +51,7 @@
 	a {
 		@apply font-body text-blue-elastic hover:text-blue-elastic-100 underline;
 
-		&[target='_blank']::after {
+		&[target='_blank']:not(:has(img))::after {
 			@apply ml-0.5;
 			content: url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='grey' height='16'><path d='M6.22 8.72a.75.75 0 0 0 1.06 1.06l5.22-5.22v1.69a.75.75 0 0 0 1.5 0v-3.5a.75.75 0 0 0-.75-.75h-3.5a.75.75 0 0 0 0 1.5h1.69L6.22 8.72Z' /><path d='M3.5 6.75c0-.69.56-1.25 1.25-1.25H7A.75.75 0 0 0 7 4H4.75A2.75 2.75 0 0 0 2 6.75v4.5A2.75 2.75 0 0 0 4.75 14h4.5A2.75 2.75 0 0 0 12 11.25V9a.75.75 0 0 0-1.5 0v2.25c0 .69-.56 1.25-1.25 1.25h-4.5c-.69 0-1.25-.56-1.25-1.25v-4.5Z' /></svg>");
 		}