[Help] How to clone text/content inside an element with CSS?

[dude99]

So, I'm working on Auto-scrolling Popup Pagetitle CSS mod. I try to use ::after plus content:attr(); to clone the #pagetitle's title into another element (yellow box), so that I can use it to auto-scroll at the bottom of Addressbar...

But as u see in the screenshot, the yellow box's content is empty. What's the correct syntax to clone the title/text/content inside the #pagetitle? Or is there other way to do so with just CSS?

Many thanks for all the help & support!

[A Former User]

I guess you can’t unless there’s a special value (or a completely separate CSS function) for it, & it doesn’t seem to. Why don’t you just move the #pagetitle?

[dude99]

@potmeklecbohdan I did, the CSS mod is pretty much done, & I try to do a endless cycle of scrolling title which require 2 title jumping back & forth... LOL

But if it's really not possible with just CSS, then it's ok. I will settle with just a simple start to end scrolling pagetitle. I read somewhere in the Internet cloning with CSS is forbidden by designer of CSS because malicious hacker can use it to steal info? But if they can do it with javascript, then CSS won't be much of a differences.

[nomadic]

@dude99 said in [Help] How to clone text/content inside an element with CSS?:

::after plus content:attr(); to clone the #pagetitle's title

Unfortunately, attr() will only give you the contents of an attribute. From what I could find, getting contents was considered too slow and was either removed from the spec or never implemented. The only attribute of the #pagetitle div is the id.

The tab elements themselves do have title attributes to create the tooltips on hover. So you could use attr(title) if you can make the .tab divs work for what you are trying to do.

Or is there other way to do so with just CSS?

Another option could be using text-shadow. You can use this to duplicate text pretty easily.

See this simple JSFiddle I made.

---

Sorry if there are any spelling/grammatical errors or it doesn't make any sense. I really ought to get to sleep

[A Former User]

@dude99 You could possibly do some awful hacks w/ shadows, filters & transforms… but I’m not doing it

// heh, someone was faster…

[dude99]

@nomadic Ah, thanks for the ideas!
Now I can upgrade my CSS mod :face_savouring_delicious_food:

[nomadic]

@potmeklecbohdan said in [Help] How to clone text/content inside an element with CSS?:

// heh, someone was faster…

Haha, I wouldn't describe myself as faster... I was working on my post before there were any replies. So you lapped me on both sides

Not exactly my fastest at 4 AM...

[dude99]

@potmeklecbohdan @nomadic Bad news guys. Both method doesn't work.

The Tabbar is gated with many layers of overflow:hidden. Thus, everything inside a tab stay lock inside unless I broke everything from .tab.active all the way to the top level of #browser, which turn the entire browser GUI into a chaotic mess. :face_savouring_delicious_food:

As for shadow-text method, it's decent for static duplication, but it's animation capability is horrible... because the shadow is always tie to the source position & also limited by overflow:hidden. So, no luck on this method too.

But I learn a lot, & here r some cool stuff I found while researching on this madness, I thought u guys might be interested in:
https://cssdeck.com/labs/mona-lisa-with-pure-css
https://codepen.io/HugoGiraudel/pen/dIDEx?editors=0100

These 2 guys must have too much time to spare & resorted to mad art creation with Pure CSS. Wait! Maybe I should do the same to unlock my inner creativity! LOL

EDIT: I have published my CSS mod, check it out: https://forum.vivaldi.net/post/439708