copy.ui-arrow-02 { position: relative; width: 30px; height: 30px; border: none; background-color: transparent; transition: transform 0.3s ease; } .ui-arrow-02:before, .ui-arrow-02:after { content: ''; background-color: #2980b9; position: absolute; top: 50%; width: 1px; height: calc(70% - 1px); margin-top: -35%; } .ui-arrow-02:before { left: 50%; margin-left: -25%; transform: rotate(-45deg); } .ui-
![UI Interactions](https://cdn-ak-scissors.b.st-hatena.com/image/square/44be0ab1006b8f4629f50fe59a92ce1f652e1332/height=288;version=1;width=512/https%3A%2F%2Fuser-images.githubusercontent.com%2F1345662%2F62012777-f3fe0b00-b160-11e9-8268-a0940a7cd592.png)