html给p标签后面加箭头,html – 使用CSS在伪元素之前和之后创建左箭头

你可以像这样旋转180度的箭头：

a {

display: inline-block;

font-family: Arial, Helvetica, sans-serif;

font-weight: bold;

padding: 10px 15px 10px 10px;

position: relative;

text-decoration: none;

}

.left{

-webkit-transform:rotate(180deg);

-ms-transform:rotate(180deg);

transform:rotate(180deg);

}

a:before, a:after {

border-right: 2px solid;

content: '';

display: block;

height: 8px;

margin-top: -6px;

position: absolute;

-moz-transform: rotate(135deg);

-o-transform: rotate(135deg);

-webkit-transform: rotate(135deg);

transform: rotate(135deg);

right: 10px;

top: 50%;

width: 0;

}

a:after {

margin-top: -1px;

-moz-transform: rotate(45deg);

-o-transform: rotate(45deg);

-webkit-transform: rotate(45deg);

transform: rotate(45deg);

}

a:hover, a:focus,

a:hover:before, a:hover:after,

a:focus:before, a:focus:after {

color: #000;

}

您也可以使用scaley(-1)而不是rotate来实现相同的输出.

还有一些更简单的方法来制作这个箭头,你可能想要查看这个帖子,其中有一个很棒的箭头列表,如下所示：How to Make A Fancy Arrow Using CSS?