Centered header with underline styled using CSS pseudo element

I have centered heading text in a container, and I am using a border-bottom and pseudo element to create an underline effect. However, I am uncertain about how to make the underline stop at the end of the heading text.

https://i.sstatic.net/FseHl.png

Here is my code:

.headerWrap {
  background: #0a1633;
  position: relative;
}

/* Attempting to use this to mask the overflow */
.headerWrap:after {
  position: absolute;
  display: block;
  content: "";
  bottom: 0;
  left: 65%;
  right: 0;
  border-bottom: 10px solid #0a1633;
}

.header {
  margin: 0 auto 24px;
  text-align: center;
  font-weight: bold;
  position: relative;
  padding-bottom: 10px;
  color: #ff6347;
  border-bottom: 2px solid #ff6347;
  position: relative;
}

.header:before {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  display: block;
  margin-bottom: 2px;
  content: "";
  border-bottom: 6px solid #ff6347;
}
<div class="headerWrap">
  <h3 class="header">Header</h3>
</div>

htmlcss

Answer №1

Here's a unique approach that doesn't require any additional elements and can adapt to any content. The key is to utilize the display:inline-block property for a shrink-to-fit effect, allowing the right part of the text to be considered while handling overflow on the left side.

To achieve this, we can use multiple backgrounds to create a line with just one pseudo element:

.headerWrap {
  background: #0a1633;
  text-align: center;
  overflow:hidden;
  margin:10px;
}

.header {
  margin: 5px 0 25px;
  font-weight: bold;
  position: relative;
  display:inline-block;
  color: #ff6347;
  position: relative;
}

.header:before {
  content:"";
  position: absolute;
  right: 0;
  top:100%;
  left: -100vw;
  height:10px;
  background:
    linear-gradient(#ff6347,#ff6347) top,
    linear-gradient(#ff6347,#ff6347) bottom;
  background-size:100% 6px,100% 2px;
  background-repeat:no-repeat;
}
<div class="headerWrap">
  <h3 class="header">Header</h3>
</div>

<div class="headerWrap">
  <h3 class="header">Another Header</h3>
</div>

Answer №2

Let's incorporate some flexibility.

If you assign a display: flex property to your container (.headerWrap), you can manipulate its pseudo-elements to consistently adjust the size of your content (.header) in the center as desired.
Afterwards, customize the ::before pseudo element to encompass both lines and style your content accordingly to match those same two lines, while leaving the ::after untouched.

.headerWrap {
  background: #0a1633;
  position: relative;
  display: flex;
  justify-content: center;
}

.header {
  text-align: center;
  font-weight: bold;
  position: relative;
  color: #ff6347;
  border-bottom: 6px solid #ff6347;
  position: relative;
  white-space: nowrap;
  flex: 0 1 0;
  height: 25px;
  padding: 0;
}
.headerWrap:before, .headerWrap::after {
  display: inline-block;
  content: "";
  flex: 1 0 0;
}
/* left lines */
.headerWrap:before {
  margin-top: 44px;
  border-top: 6px solid #ff6347;
  border-bottom: 2px solid #ff6347;
  height: 3px;
}
/* small horizontal line under text */
.header::before {
  content: '';
  position: absolute;
  display: inline-block;
  width: 100%;
  margin-top: 34px;
  border-bottom: 2px solid #ff6347;
}

/* just to show you can change the content dynamically */
.hidden {
  display: none;
}
.headerWrap:hover .hidden{
  display: inline;
}
<div class="headerWrap">
  <h3 class="header"><span class="hidden">This is an </span>Header</h3>
</div>

Here is a more dynamic version, utilizing an additional wrapping element to align the ::before with the content's baseLine (as opposed to hardcoded rules for height and margin-top in the previous version).

.headerContainer {
  display: flex;
  align-items: center;
  background: #0a1633;
}
.headerWrap {
  position: relative;
  display: flex;
  align-items: flex-end;
  height: 3em;
  color: #ff6347;
  flex: 1 0 0;
  padding: 1em 0;
}

.header {
  text-align: center;
  font-weight: bold;
  position: relative;
  position: relative;
  white-space: nowrap;
  flex: 0 1 0;
  margin: 0;
  padding: 0 0 12px;
  border-bottom: 2px solid;
}
.headerWrap:before, .headerWrap::after {
  display: inline-block;
  content: "";
  flex: 1 0 0;
}
/* left lines */
.headerWrap:before {
  border-top: 6px solid;
  border-bottom: 2px solid;
  height: 3px;
}
/* small horizontal line under text */
.header::before {
  content: '';
  position: absolute;
  display: inline-block;
  width: 100%;
  bottom: 3px;
  left: 0;
  border-bottom: 6px solid #ff6347;
}

/* just to show you can change the content dynamically */
.hidden {
  display: none;
}
.headerWrap:hover .hidden{
  display: inline;
}
<div class="headerContainer">
  <div class="headerWrap">
    <h3 class="header"><span class="hidden">This is an </span>Header</h3>
  </div>
</div>

Answer №3

If you're open to using jQuery, here's a solution you could try:

var height= $('#test').height();
var width= $('#test').width();
var position= $('#test').position().left
var set= position+width + 'px';
$('<style>div.headerWrap:after{left:'+set+'}</style>').appendTo('body');

.position().left retrieves the x coordinate, while .width() gets the element's width. Combine them to ensure the underline aligns with the end of the header text.

Add 

$(window).on('resize', function(){}
to handle window resizing.

Check out the snippet below: 

function count(){
  var height= $('#test').height();
  var width= $('#test').width();
  var position= $('#test').position().left
  var set= position+width + 'px';
  $('<style>div.headerWrap:after{left:'+set+'}</style>').appendTo('body');
}
count();

$(window).on('resize', function(){
      count();
});
.headerWrap {
  background: #0a1633;
  position: relative;
}

/* Attempting to use this for overflow masking */
.headerWrap:after {
  position: absolute;
  display: block;
  content: "";
  bottom: 0;
  left: 65%;
  right: 0;
  border-bottom: 10px solid #0a1633;
}

.header {
  margin: 0 auto 24px;
  text-align: center;
  font-weight: bold;
  position: relative;
  padding-bottom: 10px;
  color: #ff6347;
  border-bottom: 2px solid #ff6347;
  position: relative;
}

.header:before {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  display: block;
  margin-bottom: 2px;
  content: "";
  border-bottom: 6px solid #ff6347;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="headerWrap">
  <h3 class="header"><label id="test">Header</label></h3>
</div>

Answer №4

If you want to determine the width of the text "Header" without using a mask, you can follow these steps:

.headerWrap {
  background: #0a1633;
  position: relative;
}

.header {
  margin-top:0;
  margin-bottom:24px;
  text-align: right;
  font-weight: bold;
  position: relative;
  padding-bottom: 10px;
  color: #ff6347;
  border-bottom: 2px solid #ff6347;

  right:-webkit-calc(50% - 30px);
  right:-moz-calc(50% - 30px);
  right:calc(50% - 30px);
}

.header:before {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  display: block;
  margin-bottom: 2px;
  content: "";
  border-bottom: 6px solid #ff6347;
}
<div class="headerWrap">
  <h3 class="header">Header</h3>
</div>

Answer №5

My latest creation involves an empty div with a matching background color and padding at the bottom, making it easy to adjust the width as needed.

I decided to change the properties of h3, but you can also opt for a div with custom CSS if that suits your needs better.

Take a look at the following code snippet: 

.headerWrap {
      background: #0a1633;
      position: relative;
    }

    .header {
      margin-top:0;
      font-weight: bold;
      position: relative;
      color: #ff6347;
      text-align: center;
    }
  
  
  .inner {
    background-color: #ff6347;
    width: 54%;
    height: 0px;
    background-color: ff6347; /* Correction: Should be '#ff6347' */
    padding-bottom: 5px;
}

h3{
    margin-block-start: 0em;
    margin-block-end: 0em;
}
  
<div class="headerWrap">
      <h3 class="header">Header</h3>
      <div class="inner">&nbsp;</div>
    </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

Broken links detected in the Full Page Navigation menu on a one-page website

The hyperlinks on this particular page seem to be malfunctioning despite the fact that the li.a tags are correctly targeting specific section IDs. Markup: <header> <a href="#0" class="nav_icon"><i></i></a> </header> ...

javascriptjqueryhtmlcssnavigation

The website's responsiveness is not adjusting correctly to different screen widths

When I switch to a responsive website, the background turns red at a width of "285px" even though I have set the max width to "1140px". If I use min-width, the effect doesn't show up until 256/276px. I've tried both max and min width settings, bu ...

cssresponsive-designmedia-queries

You can interact with our dropdown menu using the tab key, even when it is

We are looking to make our dropdown tabbable when expanded and non-tabbable when collapsed. We attempted using tabindex="-1" on the content inside the expandable div, but this resulted in it being non-tabbable even when expanded. Any suggestions on how t ...

javascripthtmlcssfrontend

Issue with displaying Favicon on staging server

I need assistance with this issue. I am working to show a title and logo on a tab. It is functioning correctly on my local machine, but the logo is not appearing on the staging server. <title>Global</title> <link type="image/png" href ...

htmlcssreactjsbootstrap-4

Adjust the table cell width to match the width of the ASP image

Below is the ASP image within a table cell: <tr> <td> <asp:Image runat="server" Width="64px" Height="64px" ImageUrl="~/Images/user64.png" /> </td> ...

htmlcssasp.nethtml-tablewebforms

What could be the reason overflow:hidden isn't functioning properly in IE6?

Would you mind checking this out? http://jsfiddle.net/UQNJA/1/ It displays correctly in all updated browsers, including IE7/8 and 9. However, in IE6, the red and pink borders do not contain the floated <li>s. Any suggestions on how to fix this issu ...

htmlcssinternet-explorercross-browser

Implementing Content-Security-Policy with React and Material-UI v4 for secure styling requirements

Utilizing a React UI with material-ui version 4, the web server is embedded within a JVM application during Production. Following npm build for the UI, the bundle is deployed alongside the server side code. An essential requirement involves implementing C ...

cssreactjsmaterial-uicontent-security-policy

Position a button freely on the grid layout of bootstrap4

I need help creating a sidebar in Bootstrap 4 with a floating arrow button to collapse it, similar to this example. Currently, I'm using a `container-fluid` and dividing the row into a 2-8-2 layout for left sidebar, main content, and right sidebar. I ...

htmlcsstwitter-bootstrapbootstrap-4grid-layout

Implement modals using a for loop in Vue

I am facing an issue while trying to create modals for cards within loops. I attempted using v-bind:id="masa._id" and v-bind:data-target="'#'+masa._id", but the modal is not working. Can someone guide me on how to implement modals in loops? Belo ...

htmlvue.jsbootstrap-modal

How to easily incorporate images after text in Bootstrap 4 beta

I seem to be having trouble inserting an image in the "menu" section for the last item "Kava so sebou" after the text. I want the picture to be centered vertically and the row to maintain consistency with the other items above it. Any advice or suggestions ...

htmlcssbootstrap-4

Enhancing an element by incorporating animation into its active state

For my web assignment, I have received specific instructions regarding a section of the webpage involving five dice: There are five dice in play. When the webpage loads, a three-dimensional image of each dice must be displayed. Upon clicking a dice, it ...

htmlcsscss-animations

Issues arise when using Bootstrap-select with multiple options

Currently, I am in the process of developing a web application using Angular 6. In order to implement a customizable combo-box, I integrated the bootstrap-select library developed by Silvio Mureto into my project. However, I have encountered an issue with ...

htmltwitter-bootstrap-3angular6bootstrap-select

Ensure that only the admin is able to make something vanish for everyone else

Is there a way to hide content for everyone except the admin? Currently, I have this code implemented but it only works when a user is not logged in. When another user logs in, the content is still visible. <?php if( isset($_SESSION['username&a ...

phphtml

browsing through a timeline created using HTML and CSS

I am currently working on a web project that involves creating a timeline with rows of information, similar to a Gantt chart. Here are the key features I need: The ability for users to scroll horizontally through time. Vertical scrolling capability to na ...

javascriptjqueryhtmlcssscroll

``There seems to be an issue with CSS Transform/Transition not functioning properly

Here is some CSS code that I used to animate a list of items on my website: selector { display: flex; } #primary li a { -webkit-background-clip: text; -webkit-text-fill-color: transparent; ...

csssafaritransformtransitionwebkit-transition

Is it possible to arrange the final divs on top of the initial ones without any overlap between them?

I have a script for uploading files that displays all previously uploaded images in divs with the class "download". When I use a jQuery script to add more pictures, it puts them in divs with the class "upload". I want these new uploads to be displayed ab ...

htmlcss

Using Python's BeautifulSoup library to extract tables from archived HTML webpages

I'm currently working on extracting data from saved HTML webpages using Python 2.7 + Windows. There are several similar saved HTML webpages, each containing a table with 5 columns and an unspecified number of rows. The source code appears as follows ...

pythonhtmlbeautifulsoupextract

Guide on sending two values from a form using Ajax and the POST method

How can I send two values, A and B, from a form to check.php using Ajax with the POST method? In the code snippet below, I managed to send two input values to check.php and assign them to variables $A and $B. However, I want to accomplish this without ref ...

javascriptphpjqueryhtmlajax

Steps for triggering an event based on a user-provided time input

I'm developing an AC controlling application that allows users to specify a time for all building AC units to be automatically turned off using HTML, jQuery, and CSS. I need to implement a feature where the system compares the user-entered time with t ...

jqueryhtmleventstime

Obtaining solely the words found within HTML documents

In my Python 2.7 project, I have a folder containing multiple HTML pages that I need to extract only words from. My current process involves opening the HTML file, using the Beautiful Soup library to extract text, and then writing it to a new file. However ...

javascriptpythonhtmlcsspython-2.7