posix
KPCKevin Powell - Community
•Created by posix on 8/27/2024 in #front-end
text-decoration and pointer-events of anchor pseudo-elements
Another pet peeve of mine is to align several items with text and ::before icons on the same baseline, but when they're nested in different divs. I think sub-grid can do some tricks with that. But, for another thread.
45 replies
KPCKevin Powell - Community
•Created by posix on 8/27/2024 in #front-end
text-decoration and pointer-events of anchor pseudo-elements
haha yeah, I keep running into these things
45 replies
KPCKevin Powell - Community
•Created by posix on 8/27/2024 in #front-end
text-decoration and pointer-events of anchor pseudo-elements
Yeah I figured. I've accepted the added markup. Was hoping it would be possible to it done without to keep it cleaner. But thanks for trying to help 🙏
45 replies
KPCKevin Powell - Community
•Created by posix on 8/27/2024 in #front-end
text-decoration and pointer-events of anchor pseudo-elements
I want to do what I have in my code in the OP
45 replies
KPCKevin Powell - Community
•Created by posix on 8/27/2024 in #front-end
text-decoration and pointer-events of anchor pseudo-elements
Yeah I can leave out pointer-events
45 replies
KPCKevin Powell - Community
•Created by posix on 8/27/2024 in #front-end
text-decoration and pointer-events of anchor pseudo-elements
I'm going to wrap my anchors into a div, and give the ::before and ::afters to that. That way the CSS can stay the same, and the anchor text-decoration and pointer-events are under control. Still, an additional div wrapping I would've preferred to avoid.
45 replies
KPCKevin Powell - Community
•Created by posix on 8/27/2024 in #front-end
text-decoration and pointer-events of anchor pseudo-elements
Okay
45 replies
KPCKevin Powell - Community
•Created by posix on 8/27/2024 in #front-end
text-decoration and pointer-events of anchor pseudo-elements
I'm quite gutted about it, but I'm afraid I cannot use pseudo-elements and instead must complicate my markup with actual elements to style them the way I want 😦
45 replies
KPCKevin Powell - Community
•Created by posix on 8/27/2024 in #front-end
text-decoration and pointer-events of anchor pseudo-elements
No matter if I use
display: inline-block, the issues all persist.45 replies
KPCKevin Powell - Community
•Created by posix on 8/27/2024 in #front-end
text-decoration and pointer-events of anchor pseudo-elements
I refrain from using
position: absolute as much as possible as the alignment across browsers never seems to be 100% consistent for me, and it also makes the code more complicated in general.45 replies
KPCKevin Powell - Community
•Created by posix on 8/27/2024 in #front-end
text-decoration and pointer-events of anchor pseudo-elements
This is a little frustrating as it seems several things are fighting with one another (hidden descendantry shenanigans, "go through" stuff you cannot win against).
45 replies
KPCKevin Powell - Community
•Created by posix on 8/27/2024 in #front-end
text-decoration and pointer-events of anchor pseudo-elements
Hi, thanks for getting back. The code had been there from the beginning but nvm.
45 replies
KPCKevin Powell - Community
•Created by posix on 8/27/2024 in #front-end
text-decoration and pointer-events of anchor pseudo-elements
Seems to be login-walled and I don't have an account
45 replies
KPCKevin Powell - Community
•Created by Corizon on 3/15/2023 in #front-end
How do I create a responsive text?
Took me a moment to understand what utopia even is. But I understand it's a tool to generate an elaborate CSS hack that will allow what we need here?
28 replies
KPCKevin Powell - Community
•Created by Corizon on 3/15/2023 in #front-end
How do I create a responsive text?
I feel so dumb now thinking the 500px width of the container would translate in an absolute width of 500px on the type. But surely it'll apply that as a font-size. I was too fixated on the container width.
28 replies
KPCKevin Powell - Community
•Created by Corizon on 3/15/2023 in #front-end
How do I create a responsive text?
Thanks everyone 🙏
And always such an honour to have Kevin respond 🙇♂️
I noticed what you said Kevin, although I don't fully understand why the font size is so much larger and not corresponding to the 100cqw. I tried magic numbering which of course instantly breaks on mobile, and I didn't dare test an Apple device yet 😅
What's worse is I want to use background clipping on the font. In my case anything that overflows the grid area will be transparent, because I noticed while the type overflows, the background does not.
So I'm afraid I might resort to using an SVG of my text and scale it to my hearts content.
28 replies
KPCKevin Powell - Community
•Created by Corizon on 3/15/2023 in #front-end
How do I create a responsive text?
Thanks for responding. I tried it and it seems to work, however 100cqw doesn't seem to be 100% of the container? I guess I'm misunderstanding.
28 replies
KPCKevin Powell - Community
•Created by Corizon on 3/15/2023 in #front-end
How do I create a responsive text?
I have a grid-area in which I want text that must use
white-space: nowrap to scale responsively to available width. So I cannot use vw. I reckon the only way to do this might be cqw? Can you use these values with text?28 replies