# How to Configure External Link Identification and Rendering with Arrow Icons in Astro-Big-Doc
> Learn how to configure external link identification and rendering with arrow icons in Astro-Big-Doc. Customize link appearance with CSS pseudo-elements in the Link.astro component.
- Repository: [Micro Web Stacks/astro-big-doc](https://github.com/microwebstacks/astro-big-doc)
- Tags: how-to-guide
- Published: 2026-03-07
---
**Astro-Big-Doc automatically detects external hyperlinks by checking for URLs starting with `http` and appends a ↗ arrow icon via CSS pseudo-elements, with full customization available in the `Link.astro` component.**
When building documentation sites with [astro-big-doc](https://github.com/microwebstacks/astro-big-doc), distinguishing external links from internal navigation is essential for user experience. This guide explains how to configure external link identification and rendering with arrow icons, covering the detection logic, styling mechanisms, and customization options available in the source code.
## How External Link Detection Works
The detection mechanism resides in `src/components/markdown/Link.astro` and uses a simple string check to identify external URLs. The component evaluates whether the link destination starts with `http`, which captures both `http://` and `https://` protocols.
```javascript
const external = node.url.startsWith('http')
```
When this condition evaluates to `true`, the component applies two critical attributes to the anchor element:
- **`class="external"`** – Enables CSS-based arrow rendering
- **`target="_blank"`** – Ensures the link opens in a new browser tab
This approach treats any absolute URL with the HTTP protocol as external, while relative paths and anchor links remain unaffected.
## Arrow Icon Rendering Mechanism
The visual indicator is implemented entirely through CSS pseudo-elements, eliminating the need for external image assets. The arrow styling is defined within the same `Link.astro` file using the `.external` class and its `::after` pseudo-element.
```css
.external {
margin-right: 0.6em;
}
.external::after {
content: '\2197'; /* Unicode ↗ */
position: absolute;
scale: 0.6;
top: -0.2em; /* fine-tune vertical placement */
right: -0.6em; /* fine-tune horizontal placement */
}
```
The Unicode character `\2197` renders as a northeast arrow (↗), universally recognized as an external link indicator. The `position: absolute` placement combined with `scale: 0.6` ensures the arrow appears as a superscript without disrupting the text flow or line height.
## Customizing External Link Behavior
The `Link.astro` component offers multiple extension points for tailoring the external link identification and rendering with arrow icons to your specific requirements.
### Modifying Detection Rules
You can expand the detection logic to treat additional protocols or patterns as external links. For example, to include `mailto:` links or FTP addresses:
```javascript
// src/components/markdown/Link.astro
const external = node.url.startsWith('http') || node.url.startsWith('mailto:') || node.url.startsWith('ftp')
```
This modification ensures that email and file transfer links receive the same visual treatment and `target="_blank"` behavior as standard external URLs.
### Changing the Arrow Icon
Replace the default northeast arrow with alternative Unicode symbols or SVG data URIs:
```css
/* src/components/markdown/Link.astro */
.external::after {
content: '\21AA'; /* ↪ leftwards arrow with hook */
/* Or use an SVG: */
/* content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 17L17 7M17 7H7M17 7V17' stroke='currentColor' stroke-width='2' fill='none'/%3E%3C/svg%3E"); */
}
```
### Adjusting Arrow Size and Position
Fine-tune the visual appearance by modifying the CSS transform and positioning properties:
```css
.external::after {
scale: 0.8; /* Larger arrow */
top: -0.1em; /* Closer to baseline */
right: -0.5em; /* Reduced offset */
}
```
### Customizing Arrow Colors
Apply specific colors to match your brand or theme:
```css
.external::after {
color: #ff6600; /* Orange arrow */
opacity: 0.8;
}
```
Alternatively, style the parent `.external` class to affect both the link text and arrow simultaneously.
## Key Implementation Files
Understanding the file structure helps when configuring external link identification and rendering with arrow icons in your Astro-Big-Doc project.
| File | Purpose |
|------|---------|
| `src/components/markdown/Link.astro` | Core component containing the external detection logic (`node.url.startsWith('http')`), target attribute assignment, and CSS arrow styling via `.external::after` |
| `src/components/markdown/directive/ButtonDirective.astro` | Alternative implementation demonstrating SVG-based arrow injection using `` for button-style links |
| `src/assets/rightarrow.svg` | Optional SVG asset providing a scalable vector version of the right-arrow for use in custom components |
These files work together to provide both automatic external link detection and flexible icon rendering options throughout the documentation site.
## Summary
- **Automatic Detection**: Astro-Big-Doc identifies external links in `src/components/markdown/Link.astro` by checking if URLs start with `http`, automatically applying `target="_blank"` and the `external` CSS class.
- **CSS-Based Arrows**: The arrow icon is rendered using the `.external::after` pseudo-element with Unicode character `\2197` (↗), requiring no external image assets.
- **Full Customization**: You can modify detection rules to include protocols like `mailto:` or `ftp`, replace the Unicode arrow with SVG data URIs, and adjust sizing, positioning, and colors through CSS.
- **Alternative Implementations**: The repository includes SVG-based approaches in `ButtonDirective.astro` and the `rightarrow.svg` asset for scenarios requiring more complex iconography.
## Frequently Asked Questions
### How does Astro-Big-Doc identify external links?
Astro-Big-Doc identifies external links by checking if the URL starts with `http` using the logic `const external = node.url.startsWith('http')` in `src/components/markdown/Link.astro`. When this condition is true, the link receives the `external` CSS class and `target="_blank"` attribute, triggering the arrow icon rendering and new-tab behavior.
### Can I use a custom SVG instead of the Unicode arrow?
Yes, you can replace the Unicode arrow with an SVG by modifying the CSS in `Link.astro`. Change the `content` property of `.external::after` to use an SVG data URI: `content: url("data:image/svg+xml,%3Csvg...")`. Alternatively, reference the existing `src/assets/rightarrow.svg` file or follow the pattern in `ButtonDirective.astro` which uses `` for SVG-based arrow injection.
### How do I exclude certain links from external link styling?
To exclude specific links from external link styling, modify the detection logic in `src/components/markdown/Link.astro`. You can add exclusion conditions to the `external` constant, such as `const external = node.url.startsWith('http') && !node.url.includes('example.com')`. This ensures links to specific domains or matching certain patterns are treated as internal links, bypassing the `external` class assignment and arrow rendering.
### Where is the external link CSS defined?
The external link CSS is defined within `src/components/markdown/Link.astro` in the component's style block. The `.external` class sets `margin-right: 0.6em`, while the `.external::after` pseudo-element contains the arrow styling using `content: '\2197'`, absolute positioning, and scale transforms. This co-location of logic and styling ensures the external link identification and rendering remain synchronized.