Describe the issue
Breadcrumbs in RTL languages add a weird backslash to each <a href>.
For example, minimal RTL HTML:
<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css">
</head>
<body>
<main class="container">
<nav aria-label="breadcrumb">
<ul>
<li><a href="#">الرئيسية</a></li>
<li><a href="#">المنتجات</a></li>
<li><a href="#">الإلكترونيات</a></li>
<li>الهواتف الذكية</li>
</ul>
</nav>
</main>
</body>
</html>
This is the result:
Current Behavior
Breadcrumbs in RTL languages add a weird backslash to each <a href>. See image.
This is likely caused by the ::after pseudo-element.
Expected Behavior
Clean breadcrumbs without these backslashes!
Environment
Reproduced on Firefox and Chrome on Android, Linux, and Windows.
Describe the issue
Breadcrumbs in RTL languages add a weird backslash to each
<a href>.For example, minimal RTL HTML:
This is the result:
Current Behavior
Breadcrumbs in RTL languages add a weird backslash to each
<a href>. See image.This is likely caused by the
::afterpseudo-element.Expected Behavior
Clean breadcrumbs without these backslashes!
Environment
Reproduced on Firefox and Chrome on Android, Linux, and Windows.