Skip to content

Instantly share code, notes, and snippets.

@rahulgayen

rahulgayen/underline.html

Created May 14, 2023 15:05
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save rahulgayen/35d16c8cd9153ff457706009eefb686c to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save rahulgayen/35d16c8cd9153ff457706009eefb686c to your computer and use it in GitHub Desktop.
Download ZIP
Underline text html css
Raw
underline.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style-4.css" />
<title>Document</title>
<style>
:root {
background-color: #222;
color: white;
margin: 0;
padding: 0;
}
.container {
width: 650px;
}
body {
background-color: #333;
color: #fff;
}
.underline {
position: relative;
text-decoration: none !important;
display: inline-block;
margin: 0;
padding: 0;
}
.underline:after {
content: attr(data-identifier);
position: absolute;
bottom: -0.65em;
left: 0.05em;
font-size: 0.8em;
color: #fff;
background-color: green;
line-height: normal;
display: inline-block;
border-radius: 2.5px;
margin: 0 10px 0 0;
padding: 0.1em 0.5em;
/* z-index: 1; */
width: max-content;
}
.underline:before {
content: "";
display: inline-block;
position: absolute;
height: 3px;
background-color: green;
bottom: 0.35em;
left: 0;
right: 0;
}
.underline:hover:before {
background-color: #f44336;
}
p {
line-height: 2em;
/* margin-bottom: 2em; */
}
</style>
</head>
<body>
<!-- <p class="container">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut <span class="underline" data-identifier="ID-1">vestibulum</span> sapien
vitae erat luctus, at <span class="underline" data-identifier="ID-2">pellentesque</span> nisi ultrices. Praesent eu
<span class="underline" data-identifier="ID-3">mauris</span> sed nisl
<span class="underline" data-identifier="ID-4">tristique</span> faucibus. Duis vel
<span class="underline" data-identifier="ID-5">scelerisque</span> diam. Nullam vel odio
<span class="underline" data-identifier="ID-6">urna</span>, sed facilisis <span class="underline" data-identifier="ID-7">justo</span>.
</p> -->
<p class="container">
Lorem ipsum dolor sit amet consectetur adipisicing <span class="underline" data-identifier="ID-1">elit</span>. Nobis qui assumenda
dolorum optio cum dolore dolores molestias, velit nam architecto fugiat dignissimos repellat debitis sunt deleniti nisi labore
asperiores maiores <span class="underline" data-identifier="ID-1">voluptatem</span> laboriosam. Rem cum velit magni non est, aut saepe
a officiis cupiditate nam sed commodi beatae nemo hic atque, illum iusto quaerat iure recusandae quibusdam alias sapiente voluptatem
in. <span class="underline" data-identifier="ID-1">Ea</span> aliquam voluptate, voluptatum reiciendis assumenda quidem. Neque quas
aspernatur quasi repellat qui quidem nostrum eum asperiores minus explicabo, unde nesciunt assumenda hic animi exercitationem ab vitae
debitis modi deserunt! Dolores, optio neque. Vitae quo harum at repellat porro illo, accusamus in nisi laborum fuga odit quidem
consequuntur ullam illum! Consequatur cum rem voluptatibus corporis officiis! Perspiciatis illo repellendus commodi tempora nisi
<span class="underline" data-identifier="ID-1">earum</span> ipsam totam consequuntur voluptatem nesciunt rerum dolorem saepe corporis
voluptates, eos aliquam sapiente et nemo delectus provident suscipit corrupti nam molestiae asperiores. Dicta hic neque perferendis
repellat suscipit ipsam eveniet rerum, quasi tenetur cumque porro facere eum autem quis aperiam
<span class="underline" data-identifier="ID-1">maxime</span> nihil excepturi sequi aliquid quas dolorum? Illo, assumenda deserunt sint
eos, ducimus perferendis rerum dolorem consectetur distinctio eius cumque quo. Minima eligendi odit
<span class="underline" data-identifier="ID-1">accusantium</span> nisi cum magnam quasi, fugiat inventore maiores, laborum dolore quas
expedita exercitationem. Ea numquam blanditiis ipsam aspernatur soluta iusto pariatur atque, quia, repellendus voluptates culpa
perspiciatis neque iure eaque nostrum odit. Accusamus reprehenderit voluptatibus veniam consectetur voluptas vero quo, quam enim
ducimus quisquam nihil <span class="underline" data-identifier="ID-1">aliquam</span> eum illo asperiores temporibus vitae adipisci
praesentium autem rem placeat nisi voluptates! Modi non qui aliquid minima, dolores, reprehenderit ea, ratione illum natus
<span class="underline" data-identifier="ID-1">libero</span> veritatis laborum.
<span class="underline" data-identifier="ID-1">Incidunt</span> laudantium fuga illum, debitis eligendi quod harum. Iusto similique ad
voluptates odio consectetur, voluptas nesciunt animi hic dolorem voluptatibus eius exercitationem unde aut quibusdam laudantium vel
beatae pariatur quod totam nam sequi facere optio quae? Rerum deserunt officia enim tenetur, quod atque illo ipsa quas corporis
distinctio facere a pariatur repudiandae eligendi ex natus voluptas ab, impedit, adipisci expedita! Animi,
<span class="underline" data-identifier="ID-1">placeat</span> illo et ullam neque consequatur alias velit sint dignissimos aut
veritatis perspiciatis esse molestiae odit. Modi voluptatibus repellendus quos at doloribus ut ex eaque, repellat veniam obcaecati est
sapiente laborum laudantium, iure recusandae facere officia. Minima sequi iure reiciendis perferendis rerum iusto laudantium
reprehenderit animi. Nam tempora laboriosam iusto tempore, officia eaque minima fugiat culpa asperiores? Adipisci nam veritatis labore
tenetur et, expedita quae at eligendi necessitatibus qui dolorum ab quaerat earum odit illum similique alias impedit. Dignissimos
error, sunt quis ducimus sed, doloremque nulla, ipsa repellat impedit nisi quisquam odit molestiae esse distinctio deserunt veniam
r<span class="underline" data-identifier="ID-1">epudiandae</span> consequatur ipsam. Sunt id maxime illo ab cum error tempora sint!
Quia, nisi laborum culpa non iusto quam eveniet <span class="underline" data-identifier="ID-1">consequatur</span> quibusdam commodi
nesciunt porro labore dolorum sed quod exercitationem praesentium. Officia dolores numquam eum laudantium aut non id accusantium
quibusdam illo aperiam. Illum repellat hic, obcaecati dolore iste blanditiis optio iure inventore, dicta voluptatem assumenda
<span class="underline" data-identifier="ID-1">velit</span>! Laborum pariatur aperiam nostrum, quia, labore molestiae tempora porro
perferendis quas esse natus fugit sunt? Odio voluptatibus aut porro illo! Quia distinctio eos ad reiciendis? Ducimus
<span class="underline" data-identifier="ID-1">repellat</span> ex excepturi dolores dicta perferendis enim ipsa! Quia neque dolorum
architecto! Assumenda odit voluptatum obcaecati laudantium temporibus velit id debitis, libero quod accusantium distinctio hic
sapiente harum omnis optio <span class="underline" data-identifier="ID-1">illum</span> dolores magnam odio quibusdam tempore!
Exercitationem, <span class="underline" data-identifier="ID-1">corrupti</span> fugiat laudantium debitis deleniti voluptas ut qui
iusto delectus eos numquam, porro obcaecati asperiores. <span class="underline" data-identifier="ID-1">Consequuntur</span> autem sequi
veritatis ipsum, dolor porro beatae sit quasi? Iste hic unde tenetur maiores exercitationem accusantium quis eum eligendi sequi,
expedita voluptatibus quos ipsam dolorum odit explicabo autem laborum ab inventore pariatur perferendis error. Porro ipsum cupiditate,
debitis, nisi tempore quod, inventore libero facere ipsa suscipit eius?
</p>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment