Code: CSS Dynamic Underline for Strings

Are you tired of underlining the texts with a black and boring line? Then you can find what you need here. With this code the text is underlined with a more beautiful line. When the user hovers on it, it transforms to highlighting and fills the text box. See the demo below!

<!-- this script got from www.cssfreecode.com -->
<html><head>
<style class="cp-pen-styles">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;
}
.underline--magical:hover {
  background-size: 100% 88%;
}

/*================================================
End Important Part
==================================================*/
</style></head><body>
<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 src='http://cssfreecode.com/view/files/polyfill.min.js'></script>
        <script id="rendered-js">
          // VARIABLES
const magicalUnderlines = Array.from(document.querySelectorAll('.underline--magical'));

const gradientAPI = 'http://cssfreecode.com/view/files/1120_a.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);
          //# sourceURL=pen.js
        </script>
</body></html>
<font face="Tahoma"><a target="_blank" href="http://www.cssfreecode.com/"><span style="font-size: 8pt; text-decoration: none">CSS Free Code</span></a></font>

If you don't know how to use this code or need more information Click here!


	You can leave comments once you sign in/up.

CSS Best Codes

Code: CSS Dynamic Underline for Strings

You can leave comments once you sign in/up.

Links