html - 当我将鼠标悬停在图像上时，数据内容没有出现

Question

我在网页上的图像上创建了一个叠加层，并试图在图像上添加文本。叠加层出现，红色背景也出现(用作测试以查看它是否真的有效)，但由于某种原因，当我使用 content: attr 时，我无法显示数据内容。

.container{
    max-width: 1320px;
    margin: 0 auto;
    background: #FFFFFF;
    border: 1px solid #E6E6E6;
    padding-top: 10vh;
}



.container ul{
    font-size: 0;
    text-align: center;
}

.container ul{
    margin: 0 auto;
    display: table;
}

#work li{
 padding: 10px;   
}

.container li{
    display: inline-block;
}



.overlay{
    position: relative;
    width: 400px;
    height: 400px;
}

img{
    width: 100%;
    vertical-align: top;
}

.overlay:after, .overlay:before{
    position: absolute;
    opacity: 0;
    transition: all 0.5s;
    -webkit-transition: all 0.5s;
}

.overlay:after {
    content: '\A';
    width: 100%; height:100%;
    top:0; left:0;
    background:rgba(0,0,0,0.6);
}

.overlay:before {
    content: attr(data-content);
    width:100%;
    /*font-size: 200%;*/
    color:#fff;
    z-index:1;
    padding:30px 30px;
    top: 50%;
    transform: translateY(-50%);
    text-align:center;
    background: red;
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    vertical-align: middle;
}

.overlay:hover:after, .overlay:hover:before{
    opacity: 1;  
}

这是我的 http://jsfiddle.net/1sh5jy31/

Answer 1

需要指定字体大小

http://jsfiddle.net/42soytjc/

.overlay:before {
    content: attr(data-content);
    width:100%;
    /*font-size: 200%;*/
    color:#fff;
    z-index:1;
    padding:30px 30px;
    top: 50%;
    transform: translateY(-50%);
    text-align:center;
    background: red;
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    vertical-align: middle;
    font-size:30px;
}