How do I get a custom colored underline that will span multiple lines?

how-do-i-get-a-custom-colored-underline-that-will-span-multiple-lines.markdown

How do I get a custom colored underline that will span multiple lines?

First in series of pens where I just want to make a library of useful tricks I have used for websites. In this one the key trick is multiline underline with any color I want. This is show using a random gradient so I could practice some more javascript.

A Pen by Will King on CodePen.

License.

index.html

<h1 class="heading">Look At This <span class="underline--magical">Pretty</span> Underline</h1>
<h2 class="subheading">Wow this one  is super incredibly cool, and this <span class="underline--magical">one is on Multiple Lines!</span> I wish I had found this like thirty projects ago when I was representing the lollipop guild.</h2>

script.babel

// VARIABLES
const magicalUnderlines = Array.from(document.querySelectorAll('.underline--magical'));

const gradientAPI = 'https://gist.githubusercontent.com/wking-io/3e116c0e5675c8bcad8b5a6dc6ca5344/raw/4e783ce3ad0bcd98811c6531e40256b8feeb8fc8/gradient.json';

// HELPER FUNCTIONS

// 1. Get random number in range. Used to get random index from array.
const randNumInRange = max => Math.floor(Math.random() * (max - 1));

// 2. Merge two separate array values at the same index to 
// be the same value in new array.
const mergeArrays = (arrOne, arrTwo) => arrOne
  .map((item, i) => `${item} ${arrTwo[i]}`)
  .join(', ');

// 3. Curried function to add a background to array of elms
const addBackground = (elms) => (color) => {
  elms.forEach(el => {
    el.style.backgroundImage = color;
  });
}
// 4. Function to get data from API
const getData = async(url) => {
  const response = await fetch(url);
  const data = await response.json();
  return data.data;
}

// 5. Partial Application of addBackground to always apply 
// background to the magicalUnderlines constant
const addBackgroundToUnderlines = addBackground(magicalUnderlines);

// GRADIENT FUNCTIONS

// 1. Build CSS formatted linear-gradient from API data
const buildGradient = (obj) => `linear-gradient(${obj.direction}, ${mergeArrays(obj.colors, obj.positions)})`;

// 2. Get single gradient from data pulled in array and
// apply single gradient to a callback function
const applyGradient = async(url, callback) => {
  const data = await getData(url);
  const gradient = buildGradient(data[randNumInRange(data.length)]);
  callback(gradient);
}

// RESULT
applyGradient(gradientAPI, addBackgroundToUnderlines);

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/6.26.0/polyfill.min.js"></script>

style.scss

body {
  width: 80%;
  margin: 10vw auto;
}
.heading {
  font-family: "Playfair Display", serif;
  font-size: 10vw;
}

.subheading {
  font-family: "Open Sans", sans-serif;
  font-size: 1em;
  line-height: 1.5;
}

@media screen and (min-width: 40em) {
  body {
    width: 50%;
  }
  .heading {
    font-size: 6vw;
  }

  .subheading {
    font-size: 1.75vw;
  }
}

/*================================================
Start Important Part
==================================================*/

.underline--magical {
  background-image: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%);
  background-repeat: no-repeat;
  background-size: 100% 0.2em;
  background-position: 0 88%;
  transition: background-size 0.25s ease-in;
  &:hover {
    background-size: 100% 88%;
  }
}

/*================================================
End Important Part
==================================================*/

Hi, big compliments on this design!
I want something very similar and I was hoping you would like to help me out on this/ co-work ; )

Like in your design, I want some words to get a certain styling, when hovering over the word / or an arrow which should be placed next to the paragraph. (This should be the general styling for the link indication.)
These words appear in numerous places, as a headline and in text. So I imagine when entering content, I can mark these words as a headline type 1 (or h2 etc) and then all these marked words will get the style.
Maybe some of them will be h2 (headlines), and then some random words which I will then mark with h3. At least I guess so since a headline will be larger than the normal font.

The styling I want: 1. 80% of the word should be highlighted from the right bottom corner –> See link below
2. An arrow next to the sentence/ paragraph should indicate that the word is a link

LINK: https://drive.google.com/file/d/1SJYPJ4SUH59nPNiLuCTc8jNBpsoQfbDc/view?usp=sharing

About the coloring:
It should be something from B2F09C leading to B6FFC0

I would be so glad if you fancy working this out : )

Regards, Natalia