我怎样才能居中不同宽度的伪元素？

我想居中一个工具提示，它可以根据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";'); 
})

有没有最简单的解决方案？

来源

2015-07-03 Youssef

给一个唯一的ID到元素，并做'“＃ “+ this.id +”：在“'后面。 –

为什么不直接切换一个班级？你能提供一个jsFiddle复制问题，并更好地解释预期的行为？另请参阅：http://mywiki.wooledge.org/XyProblem和FYI，您的'hover（）'方法语法用于输入/输出处理程序，这意味着您的代码将在mouseenter和mouseleave中调用，当然不是您想要的。 –

什么是'what_to_do_here'？ 'what_to_do_here'。.tooltip'元素？是否需要在''.tooltip''悬停''伪元素后添加'width'到'what_to_do_here''？可以创建stacksnippets，jsfiddle http://jsfiddle.net来演示吗？ – guest271314

伪元素管理起来很麻烦。通常，当变化是静态的时候，你可以切换一个类（就像它的例子）。但就你而言，每个元素都有不同的宽度，这使得它更难控制。

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

来源

2015-07-03 17:17:52

由于该元素具有绝对或相对位置，那么你可以使用这个CSS居中伪元素

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

来源

2015-07-03 17:19:01

感谢他的工作:) – Youssef

我怎样才能居中不同宽度的伪元素？

回答

相关问题