Source: dist/css/acc_uc.css, line 15493

4.1.1.2 Hover: Underline

Sometimes is is needed to add an underline on a piece of text when it hovers adding h: in front of the type of underline you would like gives that type of underline to the text when hovered.

Example s

underline.c_primary

classic anchor text

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, similique. Sapiente facilis ipsam unde, dolorem illo ullam, tempore quos maiores quaerat quibusdam voluptatibus laboriosam. Nisi harum magni adipisicing elit aut nulla et.

dotted.c_warning

great for popups or hint text

double.c_highlight

extra loud underlines for the really important links or modals

dashed.c_accent

extra loud dots for info and hint texts reveals.

<p class="font_1">
  Lorem ipsum dolor sit amet,
  <span class="h:[modifier class] h:c_primary-n3">consectetur</span>
  adipisicing elit.
  <span class="h:[modifier class] h:c_primary-n3">Tenetur, similique</span>.
  Sapiente facilis ipsam unde, dolorem illo ullam, tempore quos maiores quaerat quibusdam voluptatibus laboriosam. Nisi
  <span class="h:[modifier class] h:c_primary-n3">harum magni</span>
      adipisicing elit aut nulla et.
</p>

<p class="font_1">
  Lorem ipsum dolor sit amet,
  <span class="h:[modifier class] h:c_primary-n3">consectetur</span>
  adipisicing elit.
  <span class="h:[modifier class] h:c_primary-n3">Tenetur, similique</span>.
  Sapiente facilis ipsam unde, dolorem illo ullam, tempore quos maiores quaerat quibusdam voluptatibus laboriosam. Nisi
  <span class="h:[modifier class] h:c_primary-n3">harum magni</span>
      adipisicing elit aut nulla et.
</p>

Code Sample

Copy Code

Arches: Utility Classes