Custom Underlines on Headings

Developer
Mandy Michael
Size
2,713 Kb
Views
12,144
  1. Custom Underlines on Headings Previews
  2. Custom Underlines on Headings HTML Codes
  3. Custom Underlines on Headings CSS Codes

How do I make an custom underlines on headings?

Custom heading underlines for long headings. . What is a custom underlines on headings? How do you make a custom underlines on headings? This script and codes were developed by Mandy Michael on 16 December 2022, Friday.

Custom Underlines on Headings Previews
IQ Test

Custom Underlines on Headings - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Custom Underlines on Headings</title> <script src="https://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="wrapper"> <h1>Check out this super long heading with a custom underline</h1> <h1 class="fancy">I'm so fancy, you already know, I have a border, that is really cool.</h1> <h1 class="fancy2">I know flat is in but this does look pretty sweet.</h1> <h1 class="fancy2a">Ive been added in.</h1> <h1 class="fancy2a">Ive been added in, and now i have a lot of text!</h1> <h1 class="fancy3">Let me give you some background on this one...</h1> <h1 class="fancy4">I know you see what I did there!</h1>
</div>
</div>
</body>
</html>

Custom Underlines on Headings - Script Codes CSS Codes

body { background: #165578;
}
.wrapper { width: 500px; margin: 0 auto;
}
h1 { color: white; display: inline; border-bottom: 3px solid #0e364d; padding-bottom: 8px; line-height: 1.75em;
}
h1:after,
h1:before { content: ""; display: block; margin: 1em 0;
}
.fancy { border-width: 0 0 5px; border-style: solid; -o-border-image: url(http://www.w3.org/TR/css3-background/border.png) 27 round; border-image: url(http://www.w3.org/TR/css3-background/border.png) 27 fill round;
}
.fancy2a { border-width: 0 0 5px; border-style: solid; -o-border-image: url(http://www.w3.org/TR/css3-background/border.png) 27 stretch; border-image: url(http://www.w3.org/TR/css3-background/border.png) 27 fill stretch;
}
.fancy2 { box-shadow: 0px 7px 5px -2px rgba(0, 0, 0, 0.3);
}
.fancy3 { background-color: #124662;
}
.fancy4 { border-width: 0 0 5px; border-style: solid; -o-border-image: linear-gradient(45deg, #0d3349, #155274) 10% round; border-image: -webkit-linear-gradient(45deg, #0d3349, #155274) 10% round; border-image: linear-gradient(45deg, #0d3349, #155274) 10% round;
}
Custom Underlines on Headings - Script Codes
Custom Underlines on Headings - Script Codes
Home Page Home
Developer Mandy Michael
Username mandymichael
Uploaded December 16, 2022
Rating 4
Size 2,713 Kb
Views 12,144
Do you need developer help for Custom Underlines on Headings?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Mandy Michael (mandymichael) Script Codes
Name
CSS Blend Mode Text Effect
CSS only 3D paper fold text effect
Angled Split Text Colour
Stripy Rainbow Text Effect
Three way split with clip-path
Page layout text effects with clip-path
Lines and layered css text effects
Awkward Zebra Text Effect
Spotty layered CSS text effects
Editable layered textured fonts
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!