html中带箭头的直线代码,纯CSS实现的带箭头线条

CSS

语言：

CSSSCSS

确定

.link {

position: relative;

display: block;

padding: 1em 3em 1em 1em;

font-size: 30px;

font-weight: bold;

text-decoration: none;

color: #e74c3c;

box-shadow: inset 0 0 0 0.2em #e74c3c;

}

.link:after, .link:before {

content: "";

display: block;

position: absolute;

-webkit-transition: all 0.5s ease-in-out;

transition: all 0.5s ease-in-out;

}

.link:before {

top: 50%;

right: 1em;

width: 1em;

height: 1em;

-webkit-transform-origin: 50% 50%;

transform-origin: 50% 50%;

-webkit-transform: translate(0, -0.5em) rotate(45deg);

transform: translate(0, -0.5em) rotate(45deg);

box-shadow: inset -0.2em 0.2em 0 0 #e74c3c;

border-radius: 0