使用css实现包裹式阅读全文样式效果

有时候我们的博客文章列表需要阅读全文按钮，怎么做才能炫酷有好看？今天特地给自己别搞了个包裹式类似别针一样卡在文章列表上，下面直接贴代码：
1、html代码如下：

<div class="read-all">阅读全文 >></div>

2、css代码如下：

<style> 
    .read-all{
        position: absolute;
        background: #ed1c24;
        bottom: 10px;
        right: -8px;
        color: #fffcfc;
        border-radius: 2px 2px 0 2px;
        padding: 3px 10px;
        text-transform: uppercase;
        font-weight: 700;
        font-size: 14px;
        text-shadow: -1px -1px 0 rgba(0,0,0,.3);
    }
    .read-all::before {
        position: absolute;
        content: ' ';
        bottom: -8px;
        right: 0;
        height: 0;
        width: 0;
        border-top: 4px solid #ed1c24;
        border-left: 4px solid #ed1c24;
        border-right: 4px solid transparent;
        border-bottom: 4px solid transparent;
    }
</style>

我们可以通过修改padding属性来调整按钮的大小，通过绝对定位来调节你想要显示的位置，修改背景色来调整按钮颜色，下面我们来贴下以上代码的效果：

访问具体效果请点击：Java前端学习知识请访问潘子夜个人博客