Skip to content

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

Merged
theletterf merged 3 commits into
mainfrom
fix/external-link-arrow-on-image
Apr 24, 2026
Merged

fix(site): hide external link arrow when anchor wraps an image#3165
theletterf merged 3 commits into
mainfrom
fix/external-link-arrow-on-image

Conversation

@theletterf
Copy link
Copy Markdown
Member

@theletterf theletterf commented Apr 22, 2026

Summary

  • The external-link arrow rendered by a[target='_blank']::after in markdown/typography.css was appearing next to image-only links (e.g., a "Launch Stack" badge or a screenshot that links out). The indicator is redundant there — the image already conveys the target.
  • Scope the pseudo-element to anchors that do not contain an <img> via :not(:has(img)).
  • Add a short note to docs/syntax/links.md documenting the behavior.

Test plan

  • Build the docs site locally and verify an external link with text still shows the arrow.
  • Verify an external link wrapping an image (e.g. a markdown [![alt](img.png)](https://external)) no longer renders the arrow.
  • Confirm existing overrides in button.css and api-docs.css continue to work.

🤖 Generated with Claude Code

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>
@theletterf theletterf requested review from a team as code owners April 22, 2026 12:01
@theletterf theletterf requested a review from Mpdreamz April 22, 2026 12:01
@coderabbitai coderabbitai Bot added the fix label Apr 22, 2026
@coderabbitai
Copy link
Copy Markdown
Contributor

coderabbitai Bot commented Apr 22, 2026

Warning

Rate limit exceeded

@theletterf has exceeded the limit for the number of commits that can be reviewed per hour. Please wait 40 minutes and 28 seconds before requesting another review.

Your organization is not enrolled in usage-based pricing. Contact your admin to enable usage-based pricing to continue reviews beyond the rate limit, or try again in 40 minutes and 28 seconds.

⌛ How to resolve this issue?

After the wait time has elapsed, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

We recommend that you space out your commits to avoid hitting the rate limit.

🚦 How do rate limits work?

CodeRabbit enforces hourly rate limits for each developer per organization.

Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout.

Please see our FAQ for further information.

ℹ️ Review info
⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro Plus

Run ID: 335ac507-af68-435c-b59f-76d953054372

📥 Commits

Reviewing files that changed from the base of the PR and between 3139c8a and 337a965.

📒 Files selected for processing (1)
  • docs/syntax/links.md
📝 Walkthrough

Walkthrough

Documentation was added to clarify that external links (those with target='_blank') display an arrow indicator next to the link text. A corresponding CSS selector update was made to ensure this indicator is omitted when the link element wraps an image, matching the documented behavior. The change uses the :not(:has(img)) selector to exclude anchors containing images from receiving the arrow indicator.

Suggested labels

fix

🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
Check name Status Explanation
Title check ✅ Passed The title accurately summarizes the main change: hiding the external link arrow when an anchor wraps an image.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.
Description check ✅ Passed The pull request description clearly explains the problem (arrow appearing on image-only links), the solution (using :not(:has(img))), and documents what was changed.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
✨ Simplify code
  • Create PR with simplified code
  • Commit simplified code in branch fix/external-link-arrow-on-image

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

theletterf and others added 2 commits April 22, 2026 14:14
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>
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>
@theletterf theletterf requested a review from cotti April 22, 2026 15:58
@theletterf
Copy link
Copy Markdown
Member Author

@Mpdreamz Need an approval for this one

@theletterf theletterf merged commit 5decf52 into main Apr 24, 2026
26 checks passed
@theletterf theletterf deleted the fix/external-link-arrow-on-image branch April 24, 2026 07:42
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants