Headline Underline Arrow

Developer
El Alemaño
Size
2,892 Kb
Views
18,216
  1. Headline Underline Arrow Previews
  2. Headline Underline Arrow HTML Codes
  3. Headline Underline Arrow CSS Codes

How do I make an headline underline arrow?

What is a headline underline arrow? How do you make a headline underline arrow? This script and codes were developed by El Alemaño on 15 November 2022, Tuesday.

Headline Underline Arrow Previews
IQ Test

Headline Underline Arrow - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Headline Underline Arrow</title> <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"> <h3>About us</h3> <div class="side-arrow clearfix"> Sed tempus, nibh non fermentum sodales, odio justo faucibus erat, sed dapibus nisi sem in dui. Vestibulum velit nisl, efficitur sit amet neque lacinia, luctus viverra est. Maecenas at convallis nisi. Nullam sapien ante, porta id porttitor et, dignissim id metus. Cras ornare enim nisi, sit amet accumsan dolor semper sit amet. Maecenas vitae interdum nulla, vel gravida odio. Vivamus scelerisque nulla a velit ultrices, nec placerat nulla pulvinar. Mauris non ante auctor, lobortis magna sed, ultrices diam. Curabitur eu urna leo. Maecenas commodo quam quis pulvinar placerat. </div>
</div>
</body>
</html>

Headline Underline Arrow - Script Codes CSS Codes

*, *:before, *:after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0;
}
.clearfix:before, .clearfix:after { content: " "; display: table;
}
.wrapper { position: relative; height: 100%; width: 100%; padding: 10%;
}
.wrapper h3 { font-family: 'Source Sans Pro', Tahoma, sans-serif; font-size: 2em; font-weight: 300; line-height: 1.4; margin-bottom: .5em; padding-bottom: .1em; border-bottom: 1px solid #8d8d8d; position: relative; color: #555555; box-shadow: 0px 1px 0 0 rgba(255, 255, 255, 0.8); text-shadow: 0px 1px 0px white;
}
.wrapper h3:after { display: block; content: ""; position: absolute; width: 15px; height: 15px; border-right: 1px solid #8d8d8d; border-bottom: 1px solid #8d8d8d; background-color: #fff; left: 20px; bottom: -8px; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); box-shadow: 1px 1px 0 0 rgba(255, 255, 255, 0.8);
}
.side-arrow { position: relative; margin: 50px 0 0 0; padding: 0 0 0 10px; width: 300px; float: right; border-left: 1px solid #b3b3b3;
}
.side-arrow:after { display: block; content: ""; position: absolute; width: 15px; height: 15px; border-right: 1px solid #8d8d8d; border-bottom: 1px solid #8d8d8d; background-color: #fff; left: -8px; top: 15px; -webkit-transform: rotate(135deg); -moz-transform: rotate(135deg); -ms-transform: rotate(135deg); -o-transform: rotate(135deg); transform: rotate(135deg); box-shadow: 1px 1px 0 0 rgba(255, 255, 255, 0.8);
}
Headline Underline Arrow - Script Codes
Headline Underline Arrow - Script Codes
Home Page Home
Developer El Alemaño
Username elalemanyo
Uploaded November 15, 2022
Rating 3
Size 2,892 Kb
Views 18,216
Do you need developer help for Headline Underline Arrow?

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!

El Alemaño (elalemanyo) Script Codes
Name
Telefon Ring
RGB Hover
Headline
Flexslider Playground
Dom loading
Playing with Trianglify
Video Scrolling
Highlighttextarea
Sound Wave Loading Animation
Now Reading Bubble
Create amazing SEO content 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!