@ou-imdt/css/docs/native/mark.md

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

# mark

The mark tag is not read by screen readers by default, some css has been added to add content before and after so screen readers can indicate the start and end of special text.

> Utilising the start and end indicators may lead to complications when switching languages.

## Example

<div class="card">

This is a paragraph demonstrates <mark>some text</mark> that is highlighted with the mark tag.

This is a paragraph demonstrates text <mark data-start=" Start red marked text " data-end=" End red marked text " style=" --mark-bg: red; --mark-fg: white">highlighted</mark> with the mark tag and custom background and foreground as well as custom start and end messages read by screen readers.

</div>

<details class="compact">
  <summary>HTML</summary>

```html
{markup}
```

</details>