[Solved] Moving text outside element

[pokrishka]

Hi guys,

Is there a way to move text outside of the container vertically?

The thing is I have to use ::before pseudo element for that and it has to be positioned in a specific spot but I also need text to be generated above it. My ::after element is already used for a different thing. I can use text-indent to move text outside the element horizontally. I can make line-height big to move it below element. But I cannot find a way to move it above element, which I need. I tried text-shadow and it is great, however I need it to work in IE9 and it doesn’t support text-shadow nor does its proprietary filters work on pseudo-elements. Maybe there is some way to make text aligned to the bottom of pseudo element so line height would move it upwards? Or any other way I can get text to be higher, kinda like if negative padding was a thing :)

[Paulie_D]

Some idea of the effect you are trying to achieve (a design image perhaps) would be useful.

Also, some code in a reduced case demo in Codepen.io would be very helpful.

[pokrishka]

Sure,

Sorry didn’t write it right away. Here’s a simplified version:

http://codepen.io/anon/pen/gbVzrX

As you see, here I’ve made what I need on the ::before element using text-shadow and transparent text color. Element itself is pink and located in one place and content of it looks like it is 50px above. But as I said, it wouldn’t work in IE9 :(

[Paulie_D]

I’m really confused as to what you are trying to achieve here.

What is the purpose of all this?

Do you have an image of the desired finished article?

Remember pseudo-elements should not contain actual content.

[pokrishka]

That’s more of a sports interest of how much can be designed with a single DOM element. The purpose of it is to have a specific item with a label on it. I’d like to first finish a set of those things before posting them somewhere :P

The question is pretty straightforward though, with negative text-indent and nowrap text can be moved outside element to the left, with positive – to the right. Can we somehow move text outside element upwards?

If there’s no such way, I guess I’ll have to stick to text-shadow and rule out IE9 support :(

[Paulie_D]

That’s more of a sports interest of how much can be designed with a single DOM element.

I think you’re probably working too hard at this “single element” thing…unless there is absolutely a reason to use only one element (and I can’t think of one) use more than one.

And I repeat, “pseudo-elements should not contain content”

[Author]

Posts