用伪类: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; 

    }

猜你喜欢

转载自www.cnblogs.com/Super-scarlett/p/9272533.html