How can I center a varying width pseudo element?

Question

I want to center a tooltip which can have a varying width depending on content property.

I see in this example that we can moddify pseudo class, But it seems a little bit complicated.

$(".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";');
})

There not a simplest solution ?

Give a unique id to your elements and do `"#" + this.id + ":after"`. — Karl-André Gagnon, Jul 03 '15 at 16:34
Why don't you just toggle a class? Can you provide a jsFiddle replicating issue and better explain expected behaviour? Also see: http://mywiki.wooledge.org/XyProblem And FYI, your `hover()` method syntax is for in/out handler, meaning your code will be called in mouseenter and mouseleave, surely not what you want — A. Wolff, Jul 03 '15 at 16:40
What is `what_to_do_here` ? Is `what_to_do_here` `.tooltip` element ? Is requirement to add `width` to `what_to_do_here` `:after` pseudo element on hover of `.tooltip` ? Can create stacksnippets, jsfiddle http://jsfiddle.net to demonstrate ? — guest271314, Jul 03 '15 at 16:43
@A.Wolff but how can i add the width of calculated with to the toggle class ? — Hayi, Jul 03 '15 at 16:46
There is surely better way to do what you want. `addRule` is not well supported. And from what I see, doing `transform:translate(-50%,0);` on the `:after` would achieve what you want with a better support. — Karl-André Gagnon, Jul 03 '15 at 16:47
thanks @Karl-AndréGagnon it works now you can post a answer if you want ;) — Hayi, Jul 03 '15 at 16:50
@Youssef The solution doesn't answer the main question which is *"How can I apply $(this) element to addRule with a pseudo class like this...?"* So either you change the question to something more like *"How can I center a varying width pseudo element?"* so my answer will make sense or simply delete the question. You choose! Just ping me if you change the question. — Karl-André Gagnon, Jul 03 '15 at 16:54
@Youssef I made a little edit with a working code that make it more "acceptable" and understandable on Stackoverflow. My answer will almost make more sense. — Karl-André Gagnon, Jul 03 '15 at 17:10

score 1 · Accepted Answer · answered Jul 03 '15 at 17:17

Pseudo elements are a mess to manage. Often, when the changes are static, you toggle a class (like it the exemple). But in your case, every elements have a different width which make it more difficult to control.

Luckily you don't need JavaScript to center the pseudo element. You can use CSS transform if you don't care about IE8. Instead of giving a negative margin of half your width, give it a transform:translate(-50%,0);. It center horizontally. In case you need to center it vertically, use transform:translate(-50%,-50%);

score 1 · Answer 2 · answered Jul 03 '15 at 17:19

1

Given the element has position absolute or relative then you can center pseudo element using this css

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

answered Jul 03 '15 at 17:19

Muhammad Umer

17,263
19
97
168

How can I center a varying width pseudo element?

2 Answers2