Utilize the before and after pseudo-elements to create a stylish divider

Utilizing Pseudo-elements :before and :after to create a line that appears before and after a title with the help of an image:

.mydiv::before {
content: url(img/line.png);}
.mydiv::after {
content: url(img/line.png);}

Here is the current output:

However, the desired effect is for the line to extend and cover the entire div before and after the title, like so:

Is there a method to specify a certain percentage for the image to stretch? I attempted this approach, but it did not yield the desired result :

.mydiv img {
  width: 100%;
  height: auto;
}

Answer №1

Using either :before or :after is sufficient, there is no need for both. Also, as previously mentioned, an image is not required. Check out the method outlined below.

#header {
    width: 100%;
    height: 50px;
    margin: 50px 0;
    text-align: center;
    font-size: 28px;
    position: relative;
    background-color: #57585C;
}

#header:after {
    content: '';
    width: 100%;
    border-bottom: solid 1px #fff;
    position: absolute;
    left: 0;
    top: 50%;
    z-index: 1;
}

h3 {
    background-color: #57585C; /* Same as the parents Background */
    width: auto;
    display: inline-block;
    z-index: 3;
    padding: 0 20px 0 20px;
    color: white;
    position: relative;
    font-family: calibri;
    font-weight: lighter;
    margin: 0;
}
<div id="header">
   <h3>Last Projects</h3>
</div>

Answer №2

If you want the <h3> title to have a transparent background, you can achieve this by using both :before and :after with display: flex.

For more information on flex-grow, you can refer to this link.

body {
  background: linear-gradient(0.25turn, #3f87a6, #000000, #f69d3c); /* example of custom background */
}

#header {
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: center; /* making vertical centering of all children */
}

#header::before, #header::after {
  content: '';
  flex: 1 1 auto; /* the first digit is 'flex-grow: 1', helps element to occupy all free space */ 
  border-bottom: solid 1px #fff;
}

h3 {
  flex: 0 1 auto; /* the first digit is flex-grow: 0 */ 
  padding: 0 15px 0 15px;
  color: #fff;
}
<div id="header">
  <h3>Last Projects</h3>
</div>

Answer №3

<style>
.myheader::before{
    content: '';
    position: absolute;
    left: 0;
    width: 100%;
    height: 3px;
    bottom: 2px;
    background-color: blue;
}
</style>

<div class="myheader">Our story</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

Clicking on a link to submit a form and passing a POST variable

Hey there, I'm trying to figure out how to use an anchor tag to submit a form. My form originally had an input button that passed a post variable for me to check in my php script. How can I replicate this functionality with an anchor tag? Here's ...

CSS. Absolute positioning in relation to a div element

I discovered a way to adjust the positioning of a div using jQuery. Check out this example. Is it possible to achieve the same result using CSS? UPDATE: I came across this solution. I also want the horizontal window scrollbar to appear if the fixed elem ...

Element in the Middle

I have just started learning HTML and CSS, and I'm curious to know how I can center the links Home, About, and Contact in the header. HTML: <body> <header> <h1><a href="#">HBT</a> </h1& ...

Switch between including 'light' or 'dark' styles using Javascript?

I am currently working on a project where I aim to incorporate a dark mode toggle feature. To maintain organization and scalability, I have chosen to implement the SASS (.scss) architecture rather than plain CSS. My plan is to utilize variables within my ...

Center JQuery within the current screen

My implementation of Jquery dialog is as follows: <body> <div id="comments_dialog"> Insert a comment <form> <input type="text" id="search" name="q"> </form> </div> .... </body> dialog = $( "#com ...

Combining both responsive and nonresponsive code on a single webpage

The project I am currently working on is a massive website that we cannot tackle all at once. As a result, we are developing it in phases. The challenge we are facing is transitioning from a 1990s table-based structure to a modern Bootstrap-divs responsive ...

Modify the colors of the chartist fill and stroke using JavaScript

Struggling to dynamically set colors in a chartist graph using JavaScript. How can custom colors be applied through JS? The attempted method below is not successfully changing the color for the showArea in the chartist graph. <!doctype html> <htm ...

Tips for finding information within a table using HTML

My task involves creating a table with the option for users to search data within it. However, I have encountered an issue where I am only able to search for data in the first row of the table. <table style="width:100%" id="table"> <tr> ...

Transferring a selection from a dropdown menu

I am currently working on a dropdown menu where each entry has an ID and a value. The issue I am facing is that when I click on an item on the list, the click-handler is called and passes the div. While the click handler can access the id without any probl ...

Email sending through PHP AJAX can be done without refreshing the page. The email action is handled in email.php and incorporated into

I am having trouble sending this with AJAX. The error message I keep getting is: Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more assistance, please visit @ jquer ...

Unusual layout issues arise when combining images and text

Check out this jsFiddle My goal is to display images and text side by side in a horizontal layout. The text sections are using the jQuery Cycle Lite Plugin to cycle through a list of words. However, when you view the provided jsFiddle link, you'll no ...

Simplest method for transforming static HTML files within SharePoint

My current challenge involves converting numerous static HTML documents to SharePoint (MOSS 2007). The documents can remain static, but they need to be integrated into the SharePoint site with its look and feel. Each page must be updated with the SharePoin ...

Utilizing Bootstrap's Multi-Grid System

I am currently working on implementing a Bootstrap grid design that resembles pic1.jpg. However, I am facing challenges in achieving the desired layout, as pic2.jpg shows the current scenario. Below, I have shared the code I am using. pic1.jpg :- ! pic2. ...

The clash of interests between jQuery and Bootstrap

I'm facing a problem with conflicting jQuery and Bootstrap files in my header.php code. Whenever I include the jQuery file before the bootstrap.js file, it causes issues with the tabs on my website where clicking on them does not navigate me to the co ...

Encountering problems when attempting to effectively filter a list of products using data

<div id="prod"> <div class="content" data-brand="Andrew" data-price="1000" data-store="JCPenny">Andrew</div><br /> <div class="content" data-brand="Hill" d ...

The issue with the jQuery class change not being triggered in Internet Explorer seems to be isolated, as Chrome and

This little jQuery script I have is supposed to show a fixed navigation menu once the page has been scrolled below 200px, and then change the class on each menu list item to "current" when that section reaches the top of the viewport. The issue is that th ...

I am having trouble compiling sass in VS Code using the sass --watch command

I've encountered an issue while trying to compile sass through the terminal. Despite having already installed node.js and successfully using Live Sass, I consistently receive the following error message: sass : The term 'sass' is not recogni ...

The background image is functioning correctly, but there seems to be an issue with the image overlay

I attempted to design a profile page for my website users to have an image as a banner and their profile photo. I have achieved this: https://i.sstatic.net/kFlrQ.jpg However, when I apply the top-margin to the image, it both moves the image and expands t ...

Can the placement of divs impact search engine optimization (SEO)?

My website is currently structured with div containers in the following order: Less important left side bar Less important right side bar The core center content at last I am concerned about the impact on SEO as the core content comes after the sidebars ...

The information is not appearing in the dropdown menu

The select tag for chapters is not displaying the result from the query properly. Instead of showing in the select tag, the chapter names are being displayed as echo statements. <!doctype html> <html> <head> <meta charset="utf-8"> ...