Split text effect

Question

I am trying to mimic this look of the text split, I found the codepen.io for it but it uses SCSS and I am looking for it to be CSS only if possible. If someone could help me translate the code or make it so that is CSS, that would be great. Thanks for the help in advance.

Codepen here: https://codepen.io/alexfislegend/pen/NGaaWY?q=split+text&limit=all&type=type-pens — johnstont05, Nov 08 '17 at 00:20
On CodePen, click the arrow to the right of "CSS" and click "View Compiled CSS". — LMulvey, Nov 08 '17 at 00:23
[Viewing the compiled CSS on Codepen](https://blog.codepen.io/documentation/editor/using-css-preprocessors/#viewing-the-compiled-output-2) — Shannon Young, Nov 08 '17 at 00:24
You are required to post your markup and code here, not a codepen. [mcve] — Rob, Nov 08 '17 at 00:58
just google "convert scss to css" and you're 90% done your task — agm1984, Nov 08 '17 at 01:07

score 0 · Accepted Answer · answered Nov 08 '17 at 00:32

While I am not going to write out all of the code for you I will suggest a method of doing it:

I suggest you make two div boxes, one for the filled in or solid text and one for the outlined text.

Then you set the color, font-family (Google Fonts is a good resource), font-size, and font-weight, to suit your needs for the first div.

On the second div again set the font-family, font-size, and font-weight to the same values, except set the color to transparent and add a colored border to the text. This will simulate the sort of outlined effect in the codepen.

Oh, and to make the two divs appear on the same line look at this answer.

While this will not automatically split the text between the two texts, it is a simple way to get a similar effect to what you want.

If he doesn't supply the code then the question is off topic and shouldn't be answered at all. [Not all questions can or should be answered](https://stackoverflow.com/help/how-to-answer) — Rob, Nov 08 '17 at 00:59

Split text effect

1 Answers1