---
id: 612ea4c4993aba52ab4aa32e
title: Step 18
challengeType: 0
dashedName: step-18
---
# --description--
Now it is time to use the pseudo-selectors you prepared for earlier. To create the black keys, add a new `.key.black--key::after` selector. This will target the elements with the class `key black--key`, and select the pseudo-element after these elements in the HTML.
In the new selector, set the `background-color` to `#1d1e22`. Also set the `content` property to `""`. This will make the pseudo-elements empty.
The `content` property is used to set or override the content of the element. By default, the psuedo-elements created by the `::before` and `::after` pseudo-selectors are empty, and the elements will not be rendered to the page. Setting the `content` property to an empty string `""` will ensure the element is rendered to the page while still being empty.
If you would like to experiment, try removing the `background-color` property and setting different values for the `content` property, such as `"♥"`. Remember to undo these changes when you are done so the tests pass.
# --hints--
You should have a `.key.black--key::after` selector.
```js
assert(new __helpers.CSSHelp(document).getStyle('.key.black--key::after'));
```
Your `.key.black--key::after` selector should have a `background-color` property set to `#1d1e22`.
```js
assert(new __helpers.CSSHelp(document).getStyle('.key.black--key::after')?.backgroundColor === 'rgb(29, 30, 34)');
```
Your `.key.black--key::after` selector should have a `content` property set to `""`.
```js
assert(new __helpers.CSSHelp(document).getStyle('.key.black--key::after')?.content === '""');
```
# --seed--
## --seed-contents--
```html
Piano