Text with Brief Lines on Each Side

When it comes to using CSS and HTML to add lines on either side of text, most solutions fill the entire width of the container. However, I am looking for a method that creates lines only 150px in length on either side of the text, like this:

https://i.sstatic.net/4pZkk.jpg

The challenge is that the text is dynamic and can vary in length, so it needs to be centered.

I have been experimenting with some code on jsfiddle:

https://jsfiddle.net/vh0j4q1e/

<div id="container">

TEXT HEADING

#container {
width:800px;
text-align:center;
background-color:#ccc;
}
h1 {
position: relative;
font-size: 30px;
z-index: 1;
overflow: hidden;
text-align: center;
}
h1:before, h1:after {
position: absolute;
top: 51%;
overflow: hidden;
width: 50%;
height: 3px;
content: '';
background-color: red;
}
h1:before {
margin-left: -50%;
text-align: right;
}

Can anyone provide suggestions on improving this code to achieve the desired outcome shown in the image above?

htmlcss

Answer №1

Consider using Flexbox in this scenario

h2 {
  display: flex;
  align-items: center;
  justify-content: center;
  text-transform: uppercase;
}

h2:after, h2:before {
  content: '';
  width: 150px;
  height: 2px;
  background: red;
  margin: 0 10px;
}
<h2>Lorem ipsum</h2>

Answer №2

You have the option to achieve the same effect without using Flexbox by styling the h1 element as an inline-block, and then positioning the :before pseudoelement -150px to the left and the :after pseudoelement 100% to the left.

#container {
  width:800px;
  text-align:center;
  background-color:#ccc;
  margin:0 auto;
}

h1 {
    position: relative;
    font-size: 30px;
    display: inline-block;
    padding:0 15px;
}

h1:before, h1:after {
    position: absolute;
    top: 50%;
    width: 150px;
    height: 3px;
    content: '';
    background-color: red;
    left:-150px;
}

h1:after {
  left: 100%;
}
<div id="container">
  <h1>TEXT HEADING</h1>
</div>

https://jsfiddle.net/azizn/vh0j4q1e/1/

Answer №3

Here's an alternative method that I have not extensively tested, but it should work across various browsers

#container {
  width:800px;
  max-width: 100%;
  text-align:center;
  background-color:#ccc;
}
h1 {
    position: relative;
    font-size: 30px;
    z-index: 1;
    overflow: hidden;
    text-align: center;
}
h1:before, h1:after {
    content: '';
    width: 150px;
    height: 3px;
    display:inline-block;
    background-color: red;
    vertical-align: 0.3em;
    margin: 0 -100%;
}
h1:before {
  margin-right: 0.75em;
}
h1:after {
  margin-left: 0.75em;
}
}
<div id="container">
  <h1>TEXT HEADING</h1>
</div>

Answer №4

In this revised version, I have enclosed the content in an additional DIV to achieve centering and increased spacing for the title as shown in the sample:

Link to example

<div align="center">
  <div id="container">
    <h1>TEXT HEADING</h1>
  </div>
</div>

#container {
  width:800px;
  text-align:center;
  background-color:#ccc;
}
h1 {
    position: relative;
    font-size: 30px;
    z-index: 1;
    overflow: hidden;
    text-align: center;
}
h1:before, h1:after {
    margin: 0px 0px 0px 15px;
    position: absolute;
    top: 51%;
    overflow: hidden;
    width: 50%;
    height: 3px;
    content: '';
    background-color: red;
}
h1:before {
    margin-left: -52%;
    text-align: right;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Where can I find guidance on utilizing CSS keyboards with styled-components?

image one image two 1-Is there a way to apply colored text to styled-components similar to what is shown in the tutorial video on the left in the second image? I really dislike this red text :( 2-Can styled-components provide CSS support like in the secon ...

cssreactjsreact-nativestylesstyled-components

Display or conceal section based on selected checkboxes

I'm currently working on a JavaScript script that involves showing/hiding elements based on radio button and checkbox selections. The goal is to reveal a hidden section when certain checkboxes are checked, as illustrated in the screenshot below: http ...

javascripthtml

How can a variable value be implemented in HTML style within Jinjia2?

Wondering how to dynamically position a small image on a web page based on a variable value? For instance, if the v_position variable is set at 50, you want the image to be centered horizontally. And if it's set at 100, the image should display at the ...

csshtmljinja2templating

I am looking to verify a time input using Joi

I have created a form with date and time input fields. I utilized the joi library for input validation to ensure that the date and time inputs are not left empty separately. Although I have managed to apply date validation successfully, I am facing challen ...

htmlnode.jsjoi

Styling elements with CSS when the cursor hovers over them

I have a unique design challenge where I have stacked elements - an image, text, and an icon. My goal is to make only the icon animate when any of these elements are hovered over. <style> .hvr-forward { display: inline-block; vertical-align: mi ...

csshover

Perform an Ajax request with JQuery in an HTML document and transfer the response to a different HTML page

This is my first attempt at using AJAX and jQuery to retrieve data from another HTML page. Below is the code I have written: Here is my JavaScript code: <script type="text/javascript> $(document).ready(function() { $('#submit').click( ...

javascriptjqueryhtmlajax

What is the best way to achieve a full-width navbar with the scrollbar positioned below it?

I have a similar code to what's shown here The menu is fixed, but the scrollbar seems to be appearing from the right of the navbar What I want is for the scrollbar to start below the menu instead see image example here ...

css

What is the technique for rearranging columns to be at the top in Foundation for mobile devices?

On my desktop, I have a layout like this: [Column1 large-8] [Column2 large-4] For mobile view, I'd like it to be like this: [Column2 large-4] [Column1 large-8] Below is the code snippet I am working with: <div id="search-content" class="row ma ...

htmlcsszurb-foundation

Tips on enabling users to update SQL database data on an HTML webpage

The mySQL database stores user input from a form like this: <form action="demo.php" method="POST"/> <p><label>title:</label> <input type="text" name="titulo" required/></p> ... $value = $_POST['titulo'] ; ...

phphtmlmysqlsqlforms

Generate a vertical line that spans the entire length of the webpage in a vertical direction

Looking for a way to add vertical borders that span the entire webpage to some text? Check out this HTML snippet: <div id="vLine"> <h1>text</h1> </div> Here's the accompanying CSS: #vLine { height: 100%; width: 5 ...

htmlcssheightline

In order to comply with JSX syntax rules in Gatsby.js, it is necessary to enclose adjacent elements

I want to apologize beforehand for the code quality. Every time I attempt to insert my HTML code into the Gatsby.js project on the index.js page, I encounter this error: ERROR in ./src/components/section3.js Module build failed (from ./node_modules/gatsb ...

javascripthtmlreactjsgatsby

Incorporate an HTML form into the primary HTML webpage using AngularJS application technique

As a newcomer to AngularJS, I am attempting to grasp how it can be integrated with an ASP.NET-MVC5 application. For my initial test, I want to launch an AngularJS app from a basic HTML page (in this case index.html) where the app contains a form template i ...

asp.net-mvcangularjshtmlasp.net-ajax

What is the best way to adjust the size of a <div> element when its content <span

I'm currently dealing with a div that has a max-width of 200px. Inside this div, there are some spans with the properties white-space: nowrap and display: inline-block. .a { max-width:200px; } .b { display: inline-block; white-space:nowrap; } ...

htmlcss

Creating a captivating animation for a social media like button with CSS

I came across some animation code on the web and noticed that when I click the image, it replays the animation from the starting point. I want to make it so that when I click the image, the animation plays and stops, and if clicked again, resets the image. ...

javascriptjquerycsshtml

Header navigation using jQuery

I'm encountering an issue with the final exercise in the jQuery course on Codecademy. My goal is to replicate the navigation header as accurately as possible, but I'm struggling to figure out how to keep the selected div highlighted after it&apo ...

jqueryhtmlcss

Adaptable Layouts in Bootsrap Grid

I am currently working with Bootstrap Grid. https://i.sstatic.net/giJOI.png One issue I am facing is when I switch back to my mobile screen, I want the layout to adjust accordingly like https://i.sstatic.net/RYPJm.png I have tried different methods but ...

htmlcssbootstrap-4react-bootstrap

mobile-exclusive wordpress text area problem

There seems to be a padding issue that is only affecting mobile devices. https://i.stack.imgur.com/2Tbuc.png The cause of this problem has been somewhat identified, but the solution isn't clear without impacting the preview on computers. Here is th ...

phphtmlcsswordpressmobile

Unable to show an image within the <div> element when hovering the mouse

Is it necessary to use the background style image in order to display an image on mouseover of a name? I have implemented a controller and would like the image to be replaced by text within a div tag. Below is my HTML code: <!DOCTYPE html> <html& ...

javascriptangularjshtml

Differences between Tags and Elements in HTML5

Could someone provide a detailed explanation of the distinctions between tags and elements in HTML5? I am curious about this topic because I have noticed a lot of confusion regarding the terminology online, with the terms being used interchangeably even o ...

htmltags

What is the best way to implement two-way data binding to show local storage data on an input field in HTML?

After successfully fetching all the necessary data from a sign-up API, I am looking to display this data as default in specific fields on a page (such as First Name, Last Name, Email, and Phone Number). Any help with achieving this would be greatly appre ...

angularhtmltypescript