CSS3 巧用before after选择器

这次做项目，用到了before和after选择器。

参考资料http://blog.dimpurr.com/css-before-after/

我自己写的代码，html如下

 <div class="col-sm-5 col-sm-offset-1">
            <div class="sec4-4-1">
                <img src="../../images/tips-F/t-14.jpg" width="525px"/>
            </div>
        </div>

CSS代码为：

.sec4-4-1:hover::before{
    content:"种子选择建议";
    text-align: center;
    line-height: 300px;
    font-size:35px;
    color:white;
    display:block;
    position: absolute;
    margin-left: 25%;
    margin-top: 2%;
    z-index: 2;
    /*border:1px solid red;*/
    width:300px;
    height:300px;
    border-radius: 50%;
    background-color: rgba(73,139,201,0.5);
    -webkit-transition: all 1s ease-out;
}