@ou-imdt/css/src/native/mark-s-del-ins-i.css

The IMDT CSS library styles native elements with light, extendable CSS. It is developed for Interactive Media Developers at the Open University.

:root,
:host {
  /* Mark */
  --mark-bg: #ffff00;
  --mark-fg: var(--fg1);

  /* S */
  --s-start: attr(data-start);
  --s-end: attr(data-end);

  /* i */
  --i-start: attr(data-start);
  --i-end: attr(data-end);
}


/* This css block ensures screen readers will read out some semantic tags that would otherwise be inaccessible */
:where(mark, s, del, ins, i)[data-start]::before,
:where(mark, s, del, ins, i)[data-end]::after {
  clip-path: inset(100%);
  clip: rect(1px, 1px, 1px, 1px);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

/* mark element */
mark {
  /* Mark */
  --mark-start: attr(data-start);
  --mark-end: attr(data-end);
  color: var(--mark-fg);
  background-color: var(--mark-bg);
}

mark::before {
  content: var(--mark-start);
}

mark::after {
  content: var(--mark-end);
}

/* end mark element */




/* s element */
s::before {
  content: var(--s-start);
}

s::after {
  content: var(--s-end);
}

/* end s element */

/* del element */
del::before {
  content: var(--del-start);
}

del::after {
  content: var(--del-end);
}

/* end del element */

/* ins element */
ins::before {
  content: var(--ins-start);
}

ins::after {
  content: var(--ins-end);
}

/* end ins element */

/* i element */
i::before {
  content: var(--i-start);
}

i::after {
  content: var(--i-end);
}

/* end i element */