Tips for aligning a narrow border in the middle of an object with pseudo-elements :before and :after

Currently, I'm working on adding a subtle border under the headlines of a website. My method involves utilizing before and after pseudo-elements in the code. The challenge lies in customizing the template code to achieve this effect. You can take a look at the code here.

An issue I've encountered is with the "left: 48%;" property which I have manually set. Depending on the screen size, the alignment may not be optimal, making it non-responsive. Is there a way to ensure that the border always stays centered beneath the text?

.headline p:before,
.headline p:after {
  position: absolute;
  left: 48%;
  display: block;
  width: 70px;
  border-bottom: 3px solid black;
  content: "";
}

h3 {
  text-align: center;
}
<div class="headline">
  <h3>
    My title
  </h3>
  <p>
  </p>
</div>

htmlcsspseudo-element

Answer №1

Center the pseudoelement by giving it left and right properties, then applying margin: auto.

.headline p:before,
.headline p:after {
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  display: block;
  width: 70px;
  border-bottom: 3px solid black;
  content: "";
}

h3 {
  text-align: center;
}
<div class="headline">
  <h3>
    My title
  </h3>
  <p>
  </p>
</div>

Link to demonstration fiddle page

Answer №2

Utilize the calc() CSS function in the following way:

.headline p:before,
.headline p:after {
  position: absolute;
  left: calc(50% - 35px);
  display: block;
  width: 70px;
  border-bottom: 3px solid black;
  content: "";
}

h3 {
  text-align: center;
}
<div class="headline">
  <h3>My title</h3>
  <p></p>
</div>

Answer №3

Utilize the margin property

Revise your code to:

.headline p:before, .headline p:after {
margin: 0 auto;
width: 70px;
border-bottom: 3px solid black;
content: "";
}


.headline p:before,
.headline p:after {
  margin: 0 auto;
  display: block;
  width: 70px;
  border-bottom: 3px solid black;
  content: "";
}

h3 {
  text-align: center;
}
<div class="headline">
  <h3>
My title
</h3>
  <p>
  </p>
</div>

Answer №4

simply apply margin:auto

.header p:before,
.header p:after {
  margin: auto;
  display: block;
  width: 70px;
  border-bottom: 1px solid black;
  content: "";
}

h3 {
  text-align: center;
}
<div class="header">
  <h3>
    The heading
  </h3>
  <p>
  </p>
</div>

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

Vuetify Card Overflow: Handling Multiline Text with Ellipsis

I have been experimenting with Vuetify cards and encountered an issue with their height. In the image below, you can see that the cards' height varies until it reaches a specified max-height of 225px. I want to implement a text-overflow: ellipsis feat ...

htmlcssvue.jsvuetify.js

Utilizing Google Sheets for seamless integration with Salesforce

Trying to link data from Google Sheet to Salesforce function onEdit(e){ ConnectWithSalesforce(); } function ConnectWithSalesforce() { var sheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet(); var row = sheet.getLastRow(); var ldap = sh ...

htmlgoogle-apps-scriptgoogle-sheets

What is the best way to remove all HTML tags from a JSON file?

I'm looking for a way to efficiently clean up a JSON file that contains improperly extracted HTML content. I need to remove all text that is enclosed in HTML tags, along with the tags themselves. I attempted to use this function: def eliminateHTML(s ...

pythonhtmlregexjsondata-cleaning

What is preventing SVG textPath from displaying properly? [Empty output in devtools]

I found this interesting code snippet on Mozilla and decided to incorporate it into a Vue component. <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <path id="MyPath" fill="none" stroke="red" d="M10,90 Q90,90 90,45 Q90,10 ...

cssvue.jssvggridsome

Styling hover effects on links in Bootstrap 4 with underlines

In Bootstrap 4, the anchor tags have the text-decoration: underline; property added only on hover. Is there a pre-existing helper or utility class to remove this underline? I went ahead and created my own helper class in CSS to remove the underline, but ...

csstwitter-bootstrapbootstrap-4

Unable to utilize the bootstrap-datetimepicker feature

I need help integrating a datetime picker into my template. Even after following this tutorial , I am unable to locate the CSS and JS files in Django. Code snippet from the template: <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/boots ...

cssdjangodatetimepicker

Error message stating: "Identifier not defined in Angular 6 ngFor"

Having some trouble with Google's YouTube API. While I'm able to retrieve the data successfully, I'm struggling to display it in a meaningful way. Using a service for the API call, here's the code. My goal is to showcase specific result ...

htmlnode.jsangulartypescript

Is there a way to transfer information from an HTML page to a PHP script without having to refresh the page?

Objective: The goal is to dynamically hide the "myForm" div once data is successfully submitted to the database, and then display the contents of the "section" div when the submit button is clicked. This functionality is currently working as intended. Iss ...

javascriptphphtmlajax

Adjust the proportion of an SVG element using scaling properties

I am experimenting with creating an SVG animation. In the demo, I noticed that when I adjust the charge fill of the SVG, it gets pushed to the left edge of the container. Is there a way to maintain the x,y attributes of the path in the SVG? Or have I unin ...

csssvg

Having difficulty aligning ListItem to the right within a List

I am working with an array that contains objects which I need to display in ListItems of a List. My goal is to show these ListItems from the array Objects in a layout where odd numbers are on the left and even numbers are on the right. However, I am facing ...

javascriptcssreactjsmaterial-ui

A guide on how to align Hamburger CSS in the center, center text, and include a

For a while now, I've been attempting to achieve three specific things with a Hamburger menu, but so far, I've had no luck. This Hamburger menu is responsive, transitioning into an X symbol upon clicking and moving to the right of the page with a ...

htmlcss

The challenge with linking within Layerslider

Having some trouble with an external link to a specific layerslider slide (html version, NOT wordpress). Here is the webpage in question: After reaching out in the support forum, I was advised to use this javascript: <a href="javascript:void(0);" onc ...

javascriptjqueryhtmlslideshowdeep-linking

Form confirmation popup with JQuery displaying input values upon submission click

Could anyone assist me with creating a form that displays a popup after submission, showing the entered values for confirmation along with edit and submit buttons? I have found several examples online, but none are exactly what I need. Your help would be ...

javascriptjqueryhtml

Real-time preview of a text field in JavaScript

I'm attempting to create a similar piece of code like the one at the bottom of this page for leaving comments. I have the basic code, but the result doesn't display new lines (or HTML, although that's not essential). I have the function belo ...

javascripthtmltextarea

Providing an Object as the Output of an Event Handler, in cases where the data cannot be transformed into another format

My goal is to have the second dropdown menu, labeled Item, dynamically update when a category is selected from the first dropdown menu, labeled Type. If I could access the array I created within the change event, I could easily populate the second dropdow ...

javascriptjqueryhtml

Is it possible to make a radio button readonly with Enums in C#

During the development of my ASP.Net MVC 4 application, I tried implementing a solution found on pass enum to html.radiobuttonfor MVC3, but unfortunately, I am still facing an issue. My goal is to create an edit page where the Status field is displayed as ...

c#asp.netsqlhtmlasp.net-mvc-4

Need help with creating a 3D object using WebGL? Unsure of where you might be going astray?

Is there a way to modify the z value in the vertices to achieve a different outcome visually? I attempted changing it to various numbers, but the result remains unchanged even when set to 0. As a visual learner, I would greatly appreciate any examples or e ...

html3dwebglverticesxyz

Encountering an "unexpected token" error while utilizing the JSOP API in a ReactJS application

I am facing an issue while fetching data from a JSON API, as it is throwing an "Unexpected token" error. Below is the code that I have tried so far. Any help in resolving this problem would be greatly appreciated. Below is the code snippet: var Demo = Re ...

javascripthtmljsonreactjs

What is the best way to distinguish the Footer from the Content?

While I was honing my skills in crafting a website using only HTML and CSS, I encountered an issue. I couldn't figure out how to place the footer beneath the content properly. My goal was to clearly separate each section - header, content, and footer. ...

htmlcss

Update the row striping pattern once an element has been removed

I've been working on creating a todo-list and implemented row striping. Everything was going smoothly until I realized that when I delete a task, the row striping does not update as intended. Instead of changing to white, white, beige after a deletion ...

javascriptcsslistbootstrap-4zebra-striping