Is it possible to recreate a highlighter effect similar to what is shown in the screenshot below?
I’m finding solutions that get close to this effect, but I haven’t found anything that can recreate the offset nature of the highlight that is in the original design.
Note: the highlighted copy is not a link, so any solution ideally does not reply on links styling.
Thanks!
@jd_wt, I jotted down a quick tutorial for you below.
Select your preferred text section and wrap it with a span and set the class as highlight, head over to your layout tab and change the display from inline-text to inline-block as shown below:
Next, set the height of highlight to 1 em
Scroll down to borders and add a bottom border for your desire, say, 45px and add a color of your choice
And you are done, resulting effect will be as such:
You can play around with the border-width and the height to get your desired placement.
You might want to check out the link in this thread as well.
Thank you for the quick reply! With a little adjusting to the specific EM and PX settings this works really well for copy that is on one line, but it breaks when copy wrap to two lines. Is there a way to get this to work when copy wraps to one or more lines without setting multiple spans?
Brilliant! I would have not thought to try this method but it works really well for my situation (copy wrapping to multiple lines). I’m bookmarking that link. Many thanks!
