HTML Entity for Left Arrow Bar (↤)

Beginner

6 min read

Updated: Sep 2026

1 example

Unicode U+21A4

HTML Entity for Left Arrow Bar (U+21A4) tutorial illustration

Definition

What Is the Left Arrow Bar Entity?

Left Arrow Bar (↤) is the Arrows character at Unicode U+21A4 (LEFTWARDS ARROW FROM BAR). It shows a leftwards arrow starting from a vertical bar — often used for “maps to left” / return-style notation.

Remember

Character     ↤
Unicode       U+21A4
Hex entity    &#x21A4;
Decimal       &#8612;
Named entity  &mapstoleft;
CSS escape    \21A4

All of these produce the same glyph: ↤. Prefer &mapstoleft; in HTML source for clarity; use hex/decimal when generating entities, and CSS \21A4 only in content.

Reference

Quick Reference

One table for every form you will actually use.

Form	Code	Where it goes
Named entity	`&mapstoleft;`	HTML markup (best default)
Hex entity	`↤`	HTML markup
Decimal entity	`↤`	HTML markup
CSS escape	`\21A4`	Stylesheet `content`
Direct character	`↤`	UTF-8 HTML text

When to Use Which

Situation	Use
Readable HTML source	`&mapstoleft;`
Need a numeric entity in HTML	`↤` or `↤`
Generated text via `::before` / `::after`	`content: "\21A4"`
Plain left arrow (no bar)	Use ← (U+2190)
Rightwards maps-to	Use &mapsto; (U+21A6)

See it

Live Preview

Left Arrow Bar in navigation and math-style contexts.

Return link ↤ Return

Large glyph ↤

Named entity &mapstoleft; → ↤

vs plain / right ↤ | ← | ↦

With entities Hex: ↤ | Decimal: ↤ | Named: ↤

Code

Complete HTML Example

One page that shows Left Arrow Bar with hex, decimal, named, and CSS. Use View Output or open the live editor.

Hex + Decimal + Named + CSS

All four ways to produce ↤ in a single document.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Left Arrow Bar (↤) in HTML</title>
  <style>
    #point::after {
      content: "\21A4";
    }
  </style>
</head>
<body>
  <p>Using Hex Code: &#x21A4;</p>
  <p>Using HTML Code: &#8612;</p>
  <p>Using Named Entity: &mapstoleft;</p>
  <p id="point">Using CSS Entity: </p>
  <p><a href="#">&mapstoleft; Return</a></p>
</body>
</html>

Try It Yourself

How It Works

1. Hex: U+21A4 → ↤ in HTML. The browser turns it into ↤.

2. Decimal: same code point as 8612 → ↤. Same result as hex.

3. Named: &mapstoleft; is the HTML5 name for this character — easiest to read in source.

4. CSS: use \21A4 in content (not an HTML entity). #point::after appends that ↤ after the paragraph text.

Pitfalls & Tips

Common mistakes when working with Left Arrow Bar.

Named

Prefer `&mapstoleft;`

The named form is easiest to read and matches the Unicode “maps to left” idea.

Look-alikes

Not plain ←

← (U+2190) has no bar. Use U+21A4 when you need the from-bar form.

Direction

Not ↦

&mapsto; (U+21A6) is the rightwards maps-to arrow — a different character.

A11y

Label the action

Pair ↤ with words like “Return” or “Maps to”, or use aria-label.

CSS vs HTML

Do not mix escapes

\21A4 belongs in CSS. &mapstoleft; / ↤ / ↤ belong in HTML.

Semicolon

End references

Always finish with ; — write &mapstoleft;, not &mapstoleft.

Compatibility

Browser Support

Left Arrow Bar (U+21A4) and its entity forms (&mapstoleft;, ↤, ↤, CSS \\21A4) are supported in all mainstream browsers.

✓ Universal support

Left Arrow Bar (↤)

Encode with named, hex, decimal, or CSS escape — same character everywhere.

100% Browser coverage

Google Chrome Supported

Yes

Microsoft Edge Supported

Yes

Mozilla Firefox Supported

Yes

Apple Safari Supported

Yes

Opera Supported

Yes

Internet Explorer All versions

Yes

U+21A4 / &mapstoleft; Full support

Bottom line: Prefer &mapstoleft; in HTML. Use \\21A4 only inside CSS content. Pair with visible text for accessibility.

Remember

Key Takeaways

Unicode: left arrow from bar is U+21A4 (decimal 8612).
HTML: prefer &mapstoleft; — or use ↤ / ↤.
CSS: use \21A4 inside content for generated text.
Pair: rightwards maps-to is &mapsto; (U+21A6).

One line: U+21A4 → &mapstoleft; / ↤ / ↤ / CSS \21A4.

Frequently Asked Questions

How do I display the Left Arrow Bar (↤) in HTML using entities?

Use &mapstoleft; (named), ↤ (hex), ↤ (decimal), or the CSS escape \21A4 in the content property. All render ↤.

What is the Unicode value for Left Arrow Bar?

U+21A4 (LEFTWARDS ARROW FROM BAR). Hex 21A4, decimal 8612. It belongs to the Arrows block.

Is there a named HTML entity for U+21A4?

Yes. &mapstoleft; is the HTML5 named entity for U+21A4 and is supported in modern browsers.

When should I use the Left Arrow Bar HTML entity?

Use it for maps-to-left / return-style notation in math and logic, and for UI labels that need an arrow coming from a bar. Prefer &mapstoleft; for readable HTML.

What is the difference between HTML code and CSS entity for U+21A4?

HTML entities (&mapstoleft;, ↤, or ↤) go in markup. The CSS escape \21A4 is used in stylesheets (usually in the content property of ::before/::after). Both render ↤.

How is U+21A4 different from ← or ↦?

← (U+2190, ←) is a plain leftwards arrow. U+21A4 is leftwards arrow from bar. U+21A6 (↦, &mapsto;) is the rightwards maps-to arrow.

Did you know?

Left Arrow Bar is Unicode U+21A4 (decimal 8612) — official name LEFTWARDS ARROW FROM BAR. HTML5 provides the named entity &mapstoleft;. Prefer it for readable source, or use ↤ / ↤. The rightwards counterpart is &mapsto; (U+21A6, ↦).

Next: Left Arrow Bar Black Diamond

Learn the HTML entity for Left Arrow Bar Black Diamond — next in this sequence.

Next tutorial →

About the author

Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

Experience 12 years building web and cloud systems
Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

AWS Certified Developer – Associate (Credly)

8 people found this page helpful

HTML Entity | Left Arrow Above Tilde Operator HTML Entity | Left Arrow Bar Black Diamond