Question

我希望将工具提示居中，根据content属性可以改变宽度。

我在这个example中看到我们可以修改伪类，但它看起来有点复杂。

$(".tooltip").prop('id', function(i){
    return "p_number_"+i;
}).hover( function() {
    var width = window.getComputedStyle( this, ':after').getPropertyValue('width');
    document.styleSheets[0].addRule('#'+this.id+':after','margin-left: -"'+width/2+'px";');
})

没有最简单的解决方案？

Answer 1

伪元素是一个混乱的管理。通常，当更改是静态的时，您可以切换一个类（就像它的例子一样）。但在你的情况下，每个元素都有不同的宽度，这使得它更难控制。

幸运的是，您不需要JavaScript来集中伪元素。如果transform，您可以使用CSS you don't care about IE8。不要给出宽度的一半的负余量，而是给它transform:translate(-50%,0);。它水平居中。如果您需要垂直居中，请使用transform:translate(-50%,-50%);

Answer 2

如果元素具有绝对位置或相对位置，则可以使用此css

来居中伪元素

position: absolute;
left: 50%;
transform: translateY(-50%);

如何将变宽的伪元素居中？

2 个答案: