HTML Entity for Long Right Arrow (⟶)
What You'll Learn
How to display the Long Right Arrow (⟶) symbol in HTML using hexadecimal, decimal, named entity, and CSS escape methods. This character is U+27F6 (LONG RIGHTWARDS ARROW) in the Supplemental Arrows-C block.
Render it with ⟶, ⟶, ⟶, or CSS escape \27F6. It is used for direction, navigation, flow in diagrams, and mathematical notation. For the long left counterpart, see Long Left Arrow (⟵, ⟵).
⚡ Quick Reference — Long Right Arrow
U+27F6Supplemental Arrows-C
⟶Hexadecimal reference
⟶Decimal reference
⟶Most readable option
Name Value
──────────── ──────────
Unicode U+27F6
Hex code ⟶
HTML code ⟶
Named entity ⟶
CSS code \27F6
Meaning Long rightwards arrow
Related U+27F5 = ⟵ (⟵)
Block Supplemental Arrows-CComplete HTML Example
A simple example showing the Long Right Arrow (⟶) using hexadecimal code, decimal HTML code, the named entity, and a CSS content escape:
<!DOCTYPE html>
<html>
<head>
<style>
#point:after{
content: "\27F6";
}
</style>
</head>
<body>
<p>Symbol (hex): ⟶</p>
<p>Symbol (decimal): ⟶</p>
<p>Symbol (named): ⟶</p>
<p id="point">Symbol (CSS): </p>
</body>
</html>🌐 Browser Support
The Long Right Arrow (⟶) is supported in modern browsers when the font includes Supplemental Arrows glyphs:
👀 Live Preview
See the Long Right Arrow (⟶) in navigation and diagram contexts:
🧠 How It Works
Hexadecimal Code
⟶ uses the Unicode hexadecimal value 27F6 to display the arrow.
Decimal HTML Code
⟶ uses the decimal Unicode value 10230 to display the same character.
Named Entity
⟶ is the semantic named entity for ⟶—readable in source HTML and part of the HTML5 character set.
CSS Entity
\27F6 is used in CSS stylesheets, particularly in the content property of pseudo-elements.
Same visual result
All four methods produce the glyph: ⟶. Unicode U+27F6 is in Supplemental Arrows-C. Previous: Long Left Right Double Arrow.
Use Cases
The Long Right Arrow (⟶) is commonly used in:
Forward links, next steps, breadcrumbs, and directional UI labels.
Process diagrams showing flow from left to right.
Implication, maps to, and long-arrow relations in equations.
Step-by-step guides and state transition descriptions.
Pagination, carousel controls, and forward direction indicators.
Slides and notes that need a clear right-pointing arrow.
💡 Best Practices
Do
- Use
⟶for readable source markup - Pair arrows with text labels for accessibility (e.g. “Next”)
- Choose ⟶ when you need a longer stroke than standard right arrows
- Use fonts that support arrow symbols for consistent rendering
- Serve pages with UTF-8 (
<meta charset="utf-8">)
Don’t
- Confuse
⟶(⟶) with⟵(⟵) when direction matters - Put CSS escape
\27F6in HTML text nodes - Rely on the arrow glyph alone for screen reader users
- Assume every font renders long arrows identically—test on mobile
- Use arrows as the only navigation affordance without focus styles
Key Takeaways
Four HTML/CSS references all render ⟶
⟶ ⟶ ⟶For CSS stylesheets, use the escape in the content property
\27F6Unicode U+27F6 — LONG RIGHTWARDS ARROW
Prefer ⟶ for readability; long left arrow is ⟵
Previous: Long Left Right Double Arrow Next: Long Right Arrow From Bar
❓ Frequently Asked Questions
⟶ (hex), ⟶ (decimal), ⟶ (named), or \27F6 in CSS content. All produce ⟶.U+27F6 (LONG RIGHTWARDS ARROW). Supplemental Arrows-C block. Hex 27F6, decimal 10230. Named entity: ⟶.⟶ is the named HTML entity for ⟶. It is part of the HTML5 named character set and the most readable option in source markup.⟵) is the long leftwards arrow. ⟶ (⟶) is the long rightwards arrow with a longer horizontal stroke pointing right.Explore More HTML Entities!
Discover 1500+ HTML character references — arrows, symbols, and more.
About the author
8 people found this page helpful