HTML Entity for Long Left Right Arrow (⟷)
What You'll Learn
How to display the Long Left Right Arrow (⟷) symbol in HTML using hexadecimal, decimal, named entity, and CSS escape methods. This character is U+27F7 (LONG LEFT RIGHT ARROW) in the Supplemental Arrows-C block.
Render it with ⟷, ⟷, ⟷, or CSS escape \27F7. It indicates bidirectional direction, equivalence, or left-right relation in navigation, math, and UI. For the standard short arrow, see Left Right Arrow (↔, ↔).
⚡ Quick Reference — Long Left Right Arrow
U+27F7Supplemental Arrows-C
⟷Hexadecimal reference
⟷Decimal reference
⟷Most readable option
Name Value
──────────── ──────────
Unicode U+27F7
Hex code ⟷
HTML code ⟷
Named entity ⟷
CSS code \27F7
Meaning Long left right arrow
Related U+2194 = ↔ (↔)
Block Supplemental Arrows-CComplete HTML Example
A simple example showing the Long Left Right Arrow (⟷) using hexadecimal code, decimal HTML code, the named entity, and a CSS content escape:
<!DOCTYPE html>
<html>
<head>
<style>
#point:after{
content: "\27F7";
}
</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 Left Right Arrow (⟷) is supported in modern browsers when the font includes Supplemental Arrows glyphs:
👀 Live Preview
See the Long Left Right Arrow (⟷) in navigation and diagram contexts:
🧠 How It Works
Hexadecimal Code
⟷ uses the Unicode hexadecimal value 27F7 to display the bidirectional arrow.
Decimal HTML Code
⟷ uses the decimal Unicode value 10231 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
\27F7 is used in CSS stylesheets, particularly in the content property of pseudo-elements.
Same visual result
All four methods produce the glyph: ⟷. Unicode U+27F7 is in Supplemental Arrows-C. Previous: Long Left Double Arrow Bar.
Use Cases
The Long Left Right Arrow (⟷) is commonly used in:
Two-way navigation, “back and forth,” or toggle between views.
Equivalence, correlation, or bidirectional mapping in notation.
Two-way flow or reversible process in process diagrams.
Expand/collapse, resize handles, or left-right toggle controls.
Bidirectional relation or “if and only if” in specs and API docs.
Explain equivalence, bijection, or two-way mapping in tutorials.
💡 Best Practices
Do
- Use
⟷for readable source markup - Pair arrows with text labels for accessibility (e.g. “Toggle view”)
- Choose ⟷ when you need a longer stroke than ↔
- Use fonts that support arrow symbols for consistent rendering
- Serve pages with UTF-8 (
<meta charset="utf-8">)
Don’t
- Confuse
⟷(⟷) with↔(↔) when precision matters - Put CSS escape
\27F7in 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
\27F7Unicode U+27F7 — LONG LEFT RIGHT ARROW
Prefer ⟷ for readability; short arrow is ↔
Previous: Long Left Double Arrow Bar Next: Long Left Right Double Arrow
❓ Frequently Asked Questions
⟷ (hex), ⟷ (decimal), ⟷ (named), or \27F7 in CSS content. All produce ⟷.U+27F7 (LONG LEFT RIGHT ARROW). Supplemental Arrows-C block. Hex 27F7, decimal 10231. 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 standard left right arrow. ⟷ (⟷) is the long left right arrow with a longer horizontal stroke.Explore More HTML Entities!
Discover 1500+ HTML character references — arrows, symbols, and more.
About the author
8 people found this page helpful