what does this code snippet do and is it css?

Question

I was looking for some button-layouts in CSS and stumbled upon this code snippet inside a button::after:

--slice-0: inset(50% 50% 50% 50%);

How does the --slice-0 part work and is this part of CSS? If so, what is it called?

it's a css variable https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties — dantheman, Jun 10 '21 at 19:10

Flo Ragossnig · Accepted Answer · 2021-06-10T19:28:32.647

1

The -- refers to a CSS variable. The entire definition

--slice-0: inset(50% 50% 50% 50%)

is a shorthand for top, right, bottom and / or left see here. It defines the physical offset of an element relative to its parent component.

Also check CSS custom properties (CSS variables).

edited Jun 10 '21 at 19:28

answered Jun 10 '21 at 19:18

Flo Ragossnig

1,341
14
38

score -3 · Answer 2 · answered Jun 10 '21 at 19:37

Yes it is part of css.

What it is used for, is to reshape content. So say now, for instance, you insert a picture in your HTML page and you would like to reshape the corners, not to be an arc shape but to slice the corners, it would be an ideal method.

Instead of using border-radius, you can use slice to reshape a picture

what does this code snippet do and is it css?

2 Answers2