DS in CSS

Links

Style an <a> element to act like a Casebook link by adding the class .cb-link.

Link

<a class="cb-link" href="#bar">Link</a>

Color and decoration

Links have a specific color by default, but can also be made to inherit their parent color with .cb-color-inherit.

Links have an underline by default, but that can be omitted with .cb-no-underline.

Link inheriting color Link with no underline Link with no underline inheriting color

<a class="cb-link" href="#bar">Link</a>
<a class="cb-link cb-color-inherit" href="https://example.com">Link inheriting color</a>
<a class="cb-link cb-no-underline" href="https://example.com">Link with no underline</a>
<a class="cb-link cb-no-underline cb-color-inherit" href="https://example.com">Link with no underline inheriting color</a>

External links

Links that have target="_blank" or have the class .cb-link-external have an appended icon indicating that they will open something outside the current page.

link with target blank link with target blank inheriting color link with target blank and no underline

External link class

<a class="cb-link" href="https://example.com" target="_blank" rel="noreferrer">link with target blank</a>
<a class="cb-link cb-color-inherit" href="https://example.com" target="_blank" rel="noreferrer">link with target blank inheriting color</a>
<a class="cb-link cb-no-underline" href="https://example.com" target="_blank" rel="noreferrer">link with target blank and no underline</a>
<a class="cb-link-external" href="https://example.com">External link class</a>