Fluid section title with border on both sides
How do I make an fluid section title with border on both sides?
Section titles that don't need to be an HX because they only have delimitation purposes.Encapsulated in a rectangle, adaptable to one word or more, centered and decorated with a 100% border on both sides. . What is a fluid section title with border on both sides? How do you make a fluid section title with border on both sides? This script and codes were developed by Laura Moraiti on 27 August 2022, Saturday.
Fluid section title with border on both sides - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Fluid section title with border on both sides</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="section-title"> <span class="tag tag-regular">Gingers have souls</span>
</div>
<div class="section-title"> <span class="tag tag-colored">Bazzinga!</span>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>
Fluid section title with border on both sides - Script Codes CSS Codes
body { padding: 2em;
}
.section-title { text-align: center; overflow: hidden; margin-bottom: 1.3em;
}
.tag { text-transform: uppercase; position: relative; line-height: 2.5em; padding: 0 1em; display: inline-block;
}
.tag-regular { background-color: #fff; border: 1px solid #ddd; color: #777;
}
.tag-colored { background-color: skyblue; color: #fff;
}
.tag:before,
.tag:after { content: ""; height: 1px; /* any width higher than the widest part of the page */ width: 1000px; position: absolute; top: 50%; display: block;
}
.tag-regular:before,
.tag-regular:after { background-color: #ddd;
}
.tag-colored:before,
.tag-colored:after { background-color: skyblue;
}
.tag:before{ left: -1000px;
}
.tag:after{ right: -1000px;
}
Developer | Laura Moraiti |
Username | Fixie |
Uploaded | August 27, 2022 |
Rating | 3.5 |
Size | 1,955 Kb |
Views | 28,336 |
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!
Name | Size |
Text and headings flow for a health site, on the making | 5,185 Kb |
Responsive Equal Height Columns using jQuery | 3,830 Kb |
Easy hover effect for videos | 1,985 Kb |
Two column of responsive height | 2,908 Kb |
Breadcrumb made with jQuery | 3,943 Kb |
WIP accordion without jQueryUI | 2,724 Kb |
Responsive three column fixed layout | 3,256 Kb |
Unconventional slideshow | 2,567 Kb |
Responsive and friendly table | 4,796 Kb |
Dynamic prefix, transition and transform SASS mixins | 2,551 Kb |
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!
Name | Username | Size |
Flat UI Button | Honchoman | 2,289 Kb |
Tooltip in table | Roine | 3,713 Kb |
Resizable SASS Icons | Marianarlt | 7,611 Kb |
A Pen by Miro Olma | Programiro | 2,342 Kb |
Layout 11 | Altynai | 1,690 Kb |
SVG Text Masking | JMChristensen | 2,141 Kb |
Shopping List | Markmurray | 6,015 Kb |
Svg penguin | _massimo | 2,990 Kb |
Basic HTML5 Structure | YuvarajTana | 1,289 Kb |
Spin | Elalemanyo | 8,262 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!