css3 伪类实现右箭头→

css3 实现右箭头→

css3 伪类实现右箭头→-LMLPHP

<!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Document</title>

 </head>

 <style>

.divtest{

    position: absolute;

    top: 100px;

    left: 100px;

    height: 3px;

    width: 10px;

    padding-left: 30px;

    background: red;

    line-height: 40px;

}

.divtest:before{

   content: '';

    position: absolute;

    top: -3px;

    right: -1px;

    width: 7px;

    height: 7px;

    border-top: 2px solid red;

    border-right: 2px solid red;

    transform: rotate(45deg);

}

</style>

 <body>

     <div class="divtest">

<!-- 这是一个箭头 -->

</div>

 </body>

 </html>