# Styling hooks

Style hooks are attachment points for CSS that goes beyond [tweaking CSS variables to adjust the syntax highlighter](./CSS.md). They allow you to add dimension-dependent borders, backgrounds, or decorative gimmicks (such as a fake editor window) to your animation.

## Main animation: `::before` and `::after`

You can attach the pseudo elements [`::before`](https://developer.mozilla.org/en-US/docs/Web/CSS/::before) and [`::after`](https://developer.mozilla.org/en-US/docs/Web/CSS/::after) to the main animation element `.cm-animation`, which gives you two extra boxes to play with. As children of the element animation element they inherit all of its important CSS properties (such as the `transition-duration`). Of particular note are the following custom properties, which are specifically meant for use with `::before` and `::after`:

- **`--vertical-align`**: either `1` or `0`
- **`--total-rows`**, **`--total-cols`**: Overall number of rows and columns
- **`--current-rows`**, **`--current-cols`**: Number of rows and columns for the current animation keyframe
- **`--total-width`**, **`--total-height`**: Width and height (CSS `<length>`), that includes margins, line numbers, offsets etc.
- **`--current-width`**, **`--current-height`**: Width and height for the current animation keyframe

Note: these variables are meant to be _read_ by your CSS when defining `::before` and/or `::after`! Setting them to new values will have no effect.

The following uses `::before` and some of the above CSS properties to attach a background "window" to an animation that smoothly grows and shrinks to track the number of lines displayed in each keyframe:

```css
.cm-animation::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: calc(var(--vertical-align) * 50%);
  left: 0;
  width: 100%;
  height: var(--current-height);
  background: #fff;
  transform: translateY(calc(var(--vertical-align) * -50%));
  transition-property: all;
  transition-duration: inherit;
  border-radius: 1em;
  box-shadow: 0 0 2em #ccc;
}
```
