.focus-ring (5.3.0) replaces the focus outline with a box-shadow built from --bs-focus-ring-* variables; .focus-ring-success and the other color classes recolor it.
.icon-link (5.3.0) aligns text with a .bi icon sized to 1em; .icon-link-hover slides the icon right on hover and keyboard focus.
.vr is a 1-pixel vertical divider in currentColor at 25% opacity that stretches to the height of a flex row.
.visually-hidden clips an element to 1 pixel, hiding it from the eye but not from screen readers (labels for icon-only buttons); .visually-hidden-focusable reappears on focus, which is how skip links work.
<link rel=stylesheet href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css">
<a class="visually-hidden-focusable" href="#main">Skip to main content</a>
<div class="hstack gap-3 p-3" id="main">
<a href="#" class="icon-link icon-link-hover">Read the docs
<svg class="bi" viewBox="0 0 16 16"><path d="M1 7h10V4l4 4-4 4V9H1z"/></svg></a>
<a href="#" class="link-offset-2 link-underline-opacity-25">Offset underline</a>
<div class="vr"></div>
<span class="opacity-25">25%</span> <span class="opacity-50">50%</span> <span>100%</span>
<div class="vr"></div>
<a href="#" id="focused" class="focus-ring focus-ring-success px-2 border rounded">Focused</a>
</div>
<script>document.getElementById('focused').focus();</script>