Take a look at this image that illustrates my goal.
What I want to achieve is having lines on both sides of a text element (usually a heading tag) that stretch out a specific distance (in this case, 65px).
I'm looking for a solution that adjusts dynamically based on the text length - the overall width can't be static.
I have found this particular solution to be the most effective for me in the past. You can view an example here. Using ::before and ::after pseudo classes, the code generates lines and then utilizes display:table to ensure the box adjusts to its content (in this case, h2 tags are used in the example). Typically, designs like this are centered, so I added margin: 1em auto;
By doing it this way, there is no need to add any extra HTML markup. I hope this explanation helps.
h2{
display:table;
margin: 1em auto;
}
h2:before, h2:after{
content:"";
display: block;
border-top: 1px solid #ccc;
width: 65px;
margin-top:.5em;
}
h2:before{
float: left;
margin-right:3px;
}
h2:after{
float:right;
margin-left:3px;
}
There are multiple methods to achieve this task. One approach is to enclose the text within header tags or a div with font specifications and then apply a border around it. For detailed guidance, please check out the recommendations provided in the link below:
Learn how to add centered text to a line resembling an <hr/> tag
Give this a shot: Live Demo
<html>
<head>
<style type="text/css">
.highlight-text {
position: relative;
}
.highlight-text .text {
z-index: 5;
position: absolute;
background-color: yellow;
padding: 0 8px;
}
.highlight-text .line {
left: -75px;
padding: 0 75px;
border-bottom: 1px dashed blue;
top: 1em;
display: block;
position: absolute;
width: 100%;
z-index: 1;
}
</style>
</head>
<body>
<div style="text-align:center;">
<span class="highlight-text"><span class="text">Steps</span><span class="line"></span></span>
</div>
</body>
</html>
To apply to headings, make sure to set the container's width
Your HTML code
<fieldset class="title">
<legend>Some text</legend>
</fieldset>
Your CSS code
fieldset.title {
border-top: 1px solid #aaa;
border-bottom: none;
border-left: none;
border-right: none;
display: block;
text-align: center;
}
fieldset {
width: 50%;
}
fieldset.title legend {
padding: 5px 10px;
}
I'm working on incorporating a template I created using HTML and CSS into Joomla! 4. One specific component is this navbar: <nav class="navbar navbar-default navbar-expand-md navbar-light bg-light sticky-top"> <div class="container"> ...
Trying to write a simple piece of HTML code that finds the number greater than or equal to the first initial amount that wholly divides the second given amount. The code attempts to divide the numbers, and if it fails, increments the first number by 1 and ...
As I develop a PHP login page, I am implementing a system where users need to enter a username and password to access the platform. One query that arises is: How can I dynamically display an 'Invalid username or password' error message on the s ...
Is there a way to display the input field #f_past_data when the text field #f_past_farmaco is filled out? The field #f_past_farmaco is for entering text. I attempted the following solution but it did not work as expected. $('label[for=f_past_data], ...
I came across meleze.web on NuGet, which claims to remove extra white spaces in generated HTML results. However, after adding the necessary configuration to my web.config file and running the application, I have not seen any changes in the result. Are th ...
I am working on developing a unique PDF export form using HTML and bootstrap that can be utilized in any C# project. My goal is to integrate bootstrap designs into my customized PDF layouts. While my own custom CSS file works perfectly, incorporating the b ...
In jQuery Mobile, how can I remove the base href tags from the page and disable base href? Code Snippet: // Function to test for dynamic-updating base tag support function baseTagTest() { var fauxBase = location.protocol + "//" + location.host + l ...
I'm attempting to give the user the ability to select a paragraph and copy it by clicking a button. However, my current code is not working as expected. I initially tried importing directives but encountered errors, prompting me to try a different met ...
Here is the javascript code I am using: function validate() { debugger; var username = document.getElementById('<%=txtUserName.ClientID %>').value; var password = document.getElementById('<%=txtPassword.Cl ...
My attempt to replicate the datatable from this template is not working as expected. I can't seem to get the up and down icons for sorting to show up. I've followed all the instructions but they are still missing... $(function () { $(&a ...
I'm struggling with custom styling using FullCalendar for Angular. Specifically, I need to change the background color of the 'More Events' Popover, but no matter what I attempt, my styles aren't taking effect. I've been trying to ...
I am currently diving into AngularJS and working on a simple project to create an expense tracker as a beginner task. However, I have encountered some issues with my code. While I have successfully implemented most functions, I am struggling with the upda ...
I am trying to select a specific range of elements in between two headers, excluding everything after the second header. For example, I want to select elements 1-5 from the following code snippet: <!DOCTYPE html> <html> <head> <link r ...
In my current setup, I have a series of blog posts being displayed using a for loop. Each post includes a comment form with a send button underneath it. To differentiate each post, I am including the {{post.id}} within the id attribute of the button elemen ...
Is it possible to dynamically adjust the height of an element based on screen size using calc(), while still maintaining alignment with a specified baseline grid? The height should always be a multiple of the defined variable $baseline. I've noticed ...
One of my clients is looking to allow users to record a message directly from their browser and then save it as an audio file like WAV. What would be the most effective approach for achieving this - Flash, Java, or HTML5? The goal is to find a method that ...
My website has a chat feature and I am wondering if it is protected against XSS attacks. Here is how my method works: To display incoming messages from an AJAX request, I utilize the following jQuery code: $("#message").prepend(req.msg); Although I am a ...
When I want to select an option, I can use the following script: Javascript $("#practice-area optgroup option").click(function(){ // insert your function here }); HTML <select name="practice-area" id="practice-area"> <option value="0">S ...
Initial Setup: Using a GridPane with 2 Columns Each Column containing a Label https://i.sstatic.net/EkKnl.png Desired Outcome: Filling the space between the labels with dots https://i.sstatic.net/jC7bw.png I've only found String solutions th ...
I need help aligning images to the right within list elements. The images are squares with equal height and width, and I want them to fit snugly within the height of the list element on the right side. My HTML code is quite simple for now (see example bel ...