Hey yall!
This is something I want to achive on my site (not really exactly like this):
Basically, this is pretty big text, that has ‘random’ highlighted, and theres an arrow on the second line. I saw there is no option to stylize the ‘underline’. So i’ve made additional divs and it kinda works if I edit the margins. The problem occurs when resizing the screen, as the grey bg is a DIV below the text and once the text breaks into three lines for example, it breaks the composition.
is there a workaround so I can make this grey bg stick to a word on every device and screen size? Also there’s problems with arrow going places when line breakes…
Thanks & hope i was clear enough!
For the arrow:
Use Font Awesome. You’ll use the first group on the cheat sheet: Solid Icons. choose “Caret-Right” as the arrow. You’ll only need 1 Text Components. Once you add the font from sheet, it will add another pseudo-text layer inside. To align side by side use Inline: Block.
For the highlight:
I’m pretty sure you’ll want to use another Text Component if you want to control css individually apart from the other text. It will need background color to expand out around the text and use inner padding. If you want the highlight to be separate then, yes you’ll need a div to put that 1 text element inside.
So it’ll be 4 Text Components by this screenshot.
That’s amazing, didn’t realize I could just break up the text and insert some divs in there. Thank you!
