The text in the middle is not adapting to different screen sizes

Question

The text in the middle is not adapting to different screen sizes

I am attempting to create a design with a line above and below my text that is responsive. Currently, the only method I have found requires using width which is not ideal for responsiveness.

My preference would be to utilize before and after pseudo elements only, but if this is not feasible, I am open to exploring alternative approaches.

Here is the HTML code snippet:

<div class="section-header text-center">
  <h2>Testing</h2>
</div>

And here is the corresponding CSS code:

.section-header {
  position: relative;
}

.section-header h2 {
  border: 2px solid rgba(0, 0, 0, 0.1);
  padding: 0.3em 0.8em;
  display: inline-block;
}

.section-header::before,
.section-header::after {
  border-top: 1px solid black;
  display: block;
  height: 1px;
  content: " ";
  width: 40%;
  position: absolute;
  left: 0;
  top: 1.2em;
  opacity: 0.1;
}

.section-header::after {
  right: 0;
  left: auto;
}

.text-center {
    text-align: center !important;
}

View JSFiddle Demo

html css

Answer 1

Answer №1

To achieve the desired effect, you can treat the pseudo element in relation to h2, utilizing overflow to conceal unnecessary parts:

.section-header {
  position: relative;
  overflow:hidden; /*mandatory*/
}

.section-header h2 {
  border: 2px solid black;
  padding: 0.3em 0.8em;
  display: inline-block;
  position:relative;
}

.section-header h2::before,
.section-header h2::after {
  content: " ";
  width: 100vw; /*big value here*/
  height: 1px;
  position: absolute;
  top: 0.6em;
  background:black;
}

.section-header h2::after {
  left: calc(100% + 40px); /*40px offset from the title*/
}
.section-header h2::before {
  right: calc(100% + 40px);
}

.text-center {
    text-align: center;
}

<div class="section-header text-center">
  <h2>Testing</h2>
</div>

Alternatively, you can explore a different approach without transparency by using background and box-shadow properties like so:

.section-header {
  position: relative;
  background:linear-gradient(black,black) center/100% 1px no-repeat;
}

.section-header h2 {
  border: 2px solid black;
  padding: 0.3em 0.8em;
  display: inline-block;
  position:relative;
  background:#fff;
  box-shadow: 
    40px 0 0 #fff,
    -40px 0 0 #fff;
}
.text-center {
    text-align: center;
}

<div class="section-header text-center">
  <h2>Testing</h2>
</div>

Answer 2

To achieve the desired effect, you can treat the pseudo element in relation to h2, utilizing overflow to conceal unnecessary parts:

.section-header {
  position: relative;
  overflow:hidden; /*mandatory*/
}

.section-header h2 {
  border: 2px solid black;
  padding: 0.3em 0.8em;
  display: inline-block;
  position:relative;
}

.section-header h2::before,
.section-header h2::after {
  content: " ";
  width: 100vw; /*big value here*/
  height: 1px;
  position: absolute;
  top: 0.6em;
  background:black;
}

.section-header h2::after {
  left: calc(100% + 40px); /*40px offset from the title*/
}
.section-header h2::before {
  right: calc(100% + 40px);
}

.text-center {
    text-align: center;
}

<div class="section-header text-center">
  <h2>Testing</h2>
</div>

Alternatively, you can explore a different approach without transparency by using background and box-shadow properties like so:

.section-header {
  position: relative;
  background:linear-gradient(black,black) center/100% 1px no-repeat;
}

.section-header h2 {
  border: 2px solid black;
  padding: 0.3em 0.8em;
  display: inline-block;
  position:relative;
  background:#fff;
  box-shadow: 
    40px 0 0 #fff,
    -40px 0 0 #fff;
}
.text-center {
    text-align: center;
}

<div class="section-header text-center">
  <h2>Testing</h2>
</div>

Answer 3

Answer №2

An effective approach is utilizing a flexbox for the section-header element to achieve the following:

Adjust the space between the h2 heading and the lines by setting a margin on the h2
Configure the width of the pseudo elements to occupy 100% - given that it's a flex item, it will automatically adjust based on the available space

For a visual demonstration, refer to the code snippet below:

.section-header {
  position: relative;
  display: flex; /* creating a flex container */
  align-items: center; /* vertical alignment */
}

.section-header h2 {
  border: 2px solid rgba(0, 0, 0, 0.1);
  padding: 0.3em 0.8em;
  display: inline-block;
  margin: 0 1em; /* space adjustment between h2 and line */
}

.section-header::before,
.section-header::after {
  border-top: 1px solid black;
  display: block;
  height: 1px;
  content: " ";
  width: 100%; /* occupying full-width */
  top: 1.2em;
  opacity: 0.1;
}

.text-center {
  text-align: center !important;
}

<div class="section-header text-center">
  <h2>Code Example</h2>
</div>

Answer 4

An effective approach is utilizing a flexbox for the section-header element to achieve the following:

Adjust the space between the h2 heading and the lines by setting a margin on the h2
Configure the width of the pseudo elements to occupy 100% - given that it's a flex item, it will automatically adjust based on the available space

For a visual demonstration, refer to the code snippet below:

.section-header {
  position: relative;
  display: flex; /* creating a flex container */
  align-items: center; /* vertical alignment */
}

.section-header h2 {
  border: 2px solid rgba(0, 0, 0, 0.1);
  padding: 0.3em 0.8em;
  display: inline-block;
  margin: 0 1em; /* space adjustment between h2 and line */
}

.section-header::before,
.section-header::after {
  border-top: 1px solid black;
  display: block;
  height: 1px;
  content: " ";
  width: 100%; /* occupying full-width */
  top: 1.2em;
  opacity: 0.1;
}

.text-center {
  text-align: center !important;
}

<div class="section-header text-center">
  <h2>Code Example</h2>
</div>

The text in the middle is not adapting to different screen sizes

Answer №1

Answer №2

Similar questions

Retrieve information following an Ajax call inside a pre-designed template

Crafting a Presentation of Inspirational Words

Adding flair to the encompassing container

The <br> tag does not appear to be displaying correctly on the AngularJS page

Choose a selection from the options provided

Encountering a 404 error when attempting to rewrite URLs using htaccess for enabling AngularJS html5 mode

The issue with HTML5 anchor download attribute for saving files cannot be resolved

Using Material UI, I have styled a typography element and a button to appear on the

struggling to find the precise value in the array

Shadow effect is present under every cell in the table row

Deconstructing JavaScript scripts to incorporate HTML5/CSS3 functionality for outdated browsers such as Internet Explorer

Showcasing the API-retrieved data in VueJS using checkboxes

Can a C# application's design be enhanced using CSS?

Modifying CSS post-rendering to accommodate right-to-left or left-to-right text orientation

Importing CSV files into a PHP/MySQL database

Error 404: CSS3 file not found - - utilizing Node.JS and EJS

Using td with a 100% width does not function properly

extra elements within the 'navbar-toggler' icon button

"(PHP)WordPress produces a dynamic menu that adapts to different screen sizes

Expandable fluid inline svg that dynamically fills the remaining space alongside text within a flex row