How to repeat text using ::before and ::after
https://codepen.io/stressunfit/pen/OJdJQxq
I want to achieve similar affect as this hero section of this website: https://fatfish.ca/en/. How to achieve this using ::before and ::after, cause i want to keep the main text (text in black) to be centered in any screen size.
fatfish [identity + web + strategy] | We take care of everything, f...
For nearly 15 years, fatfish has driven its clients' projects with the full power of digital. Our small, talent-packed team takes care of everything, from the initial idea to performance tracking.
22 Replies
you can do this using span
@hashir_001 Then i would have to manually type span element many times right?. I think there is some javascript involved. cause the number of elements before and after the main element (text in black) varies based on screen size.
Before and after is not best in this case you can make a div with grid, and check the layout give each heading the column and its spanning according to the layout
I'm not sure what you want to achieve that isn't already in your codepen?
You want the icons/illustrations to be the pseudo elements?
@Jochem @hart_ache I want to know how he created those lighter texts in this website hero section.: https://fatfish.ca/en/. Like the main text in black remain in center in all screen size and text besides them increase and decrease in numbers on different screen size.
fatfish [identity + web + strategy] | We take care of everything, f...
For nearly 15 years, fatfish has driven its clients' projects with the full power of digital. Our small, talent-packed team takes care of everything, from the initial idea to performance tracking.
there's a
:before and :after defined like this on the h1:
Oh the outlines! I didn’t even see those the first time. I wonder if there’s a way to use shadows with a translate to do so… hmm. But sure thing pseudo elements make sense
the text is just repeated a ton of times in that
data-title attribute
I'd recommend poking around with the dev tools, it's all there 🙂I see it just didn’t know what I was looking for. I’m not the op btw, just was confused what was even going on
@Jochem yes i did that, but felt it isn't the right way.
the number of repeats is a bit excessive, but I don't see anything wrong with it as a solution
Since they are a decorative element you wouldn’t want extra tags in your markup for decoration. I think pseudo elements make sense for this
Agree that the amount of repeats is a bit excessive
could be that they're needed on an ultrawide, but even with two 1080p monitors and the browser stretched across I don't see more than two repeated values
@hart_ache @Jochem How to view this, i am not able to see this in firefox browser.
right click, inspect element
Found it!, @Jochem thanks!
you may have to expand a couple of nodes, it'll pick some element in the tree that's under your mouse
Especially with that font and font size
@Jochem @hart_ache
<div className={styles.heroSectionTextWrapper}>
<h2 data-title="BRANDING BRANDING" className={styles.nameWrapper}>
Branding
</h2>
</div>
css :
.nameWrapper {
border: 2px solid orange;
max-width: 900px;
white-space: nowrap;
margin-right: auto;
}
.nameWrapper::before {
content: attr(data-title);
color: transparent;
-webkit-text-stroke-width: 2px;
-webkit-text-stroke-color: red;
opacity: 0.3;
} i want the content inside h2 to be inside nameWrapper div, and ::before and ::after can overflow out of nameWrapper div, but i am getting this result, where ::before is starting from .nameWrapper , i want h2 content (<h2>Branding</h2> ) to start inside the orange box, How can i do it?
like here the text in black starts inside the box, and ::before and ::after elements overflow from it.
The pseudo elements ::before( 🟠) and ::after (🟣) dont start here:
They are INSIDE the tag but before and after the content like this:
when you inspect the reference page you'll see how they sit in the dom.
You'll have to make them position: absolute; with probably the heroSectionTextWrapper as position: relative; but they are stuck in the same orange box as the h2 because the same rules apply to the pseudo elements of an element as the rules apply to the element itself until you change it explicitly.