Fluid section title with border on both sides

Developer
Laura Moraiti
Size
1,955 Kb
Views
28,336
  1. Fluid section title with border on both sides Previews
  2. Fluid section title with border on both sides HTML Codes
  3. Fluid section title with border on both sides CSS Codes

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 Previews
IQ Test

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;
}
Fluid section title with border on both sides - Script Codes
Fluid section title with border on both sides - Script Codes
Home Page Home
Developer Laura Moraiti
Username Fixie
Uploaded August 27, 2022
Rating 3.5
Size 1,955 Kb
Views 28,336
Do you need developer help for Fluid section title with border on both sides?

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!

Laura Moraiti (Fixie) Script Codes
Name
Horizontal infinite loop newsticker
Two column of responsive height
Simple and clean form
A Pen by Laura Moraiti
Responsive and friendly table
Breadcrumb made with jQuery
Dynamic prefix, transition and transform SASS mixins
User card
Striped background for a container with more than one element
Text and headings flow for a health site, on the making
Create amazing love letters 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!