用伪类:after画箭头

在项目中，经常会用到尖头，尤其是表单中，会有剪头的样式，尽量不要用图片显示。用伪类实现。

 

 

 

eg   查看更多 >

 

html:

<div class="more">查看更多</div>

 

css:

 

.more{

    font-size: 12px;

    text-align: right;

    padding: 0 15px 20px ;

    margin-bottom: 0.2rem;

    position: relative;

    }

    .more:after{

 　　 content: '';

 　　 display: block; 

  　　 position: absolute;

  　　 top: 16%;

 　　 border-top: 1px solid #000;

 　　 border-right: 1px solid #000;

 　　 transform: rotate(45deg);

 　　 right: 8px;

 　　 width: 6px;

 　　 height: 6px; 

    }

 

转载于:https://www.cnblogs.com/Super-scarlett/p/9272533.html