html设置文本不可见,html – 如何使标签中的文本在仪表上可见

使用CSS3的:: after并将其添加到meter标签,如下所示.

meter::after {

content : "0.5491";

}

这将显示仪表下方的文字.

更新

由于OP说他想要多个元素,所以更新了代码.将位置从绝对更改为相对,因此文本将始终相对于仪表

为了使它出现在仪表上,使用position：absolute来设置样式,并按如下方式给出top或margin-top-left

meter{

width:100px;

}

meter::after {

content : attr(value);

top:-17px;

left:40px;

position:relative;

}

有关:: after,访问MDN的更多参考

同样使用它,您可以删除span元素.

在这里,我们在css中使用attr()函数.在MDN阅读它

试试下面的代码片段

meter{

width:100px;

}

meter::after {

content : attr(value);

top:-17px;

left:40px;

position:relative;

}

上面的代码不适用于Firefox.这是一个已知的问题,:: after和::之前的伪作用仅适用于webkit浏览器.

对于firefox,请尝试以下代码(这是全局的.它适用于所有浏览器)

meter{

width:100px;

}

span{

}

span::after {

content : attr(data-value);

top:0px;

left:-70px;

position:relative;

}