What are the best methods for aligning pseudo elements vertically?

I am facing an issue with the placement of a before and after pseudo element for articleSubTitle. The problem occurs when the text from articleSubTitle wraps to a new line within a small container or on mobile devices. This causes the after element to appear right after the last word (refer to snippet).

My goal is to have the articleSubTitle treated as a single entity, with the before and after elements always positioned in the center of it, regardless of its length. I would share an image to illustrate, but the uploader isn't working.

I have tried using both display:block and display:inline-block for articleSubTitle, but neither has resolved the issue.

Can anyone offer guidance on how I can achieve this?

.container {
  width: 70%;
  background: gray;
}

.articleSubTitle {
  font-family: 'Nunito', sans-serif;
  font-size: 1.3rem;
  color: #4d4d4d;
}

.articleSubTitle:before,
.articleSubTitle:after {
  content: '';
  display: inline-block;
  vertical-align: middle;
  width: 70px;
  height: 1px;
  background: #2f2f2f;
}

.articleSubTitle:before {
  margin-right: 10px;
}

.articleSubTitle:after {
  margin-left: 10px;
}
<div class="container">
  <h4 class="articleSubTitle center">From the company A & the company B</h4>
</div>

htmlcss

Answer №1

Implement flexbox:

.articleSubTitle {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}


.container {
  background: silver;
}

.articleSubTitle {
  font-family: 'Nunito', sans-serif;
  font-size: 1.3rem;
  color: #4d4d4d;
}

.articleSubTitle {
  display: flex;
  justify-content: center;  /* horizontally centered */
  align-items: center;      /* vertically centered */
  text-align: center;       /* text aligned to center */
}

.articleSubTitle:before,
.articleSubTitle:after {
  content: '';
  width: 70px;
  height: 1px;
  background: #2f2f2f;
}

.articleSubTitle:before {
  margin-right: 10px;
}

.articleSubTitle:after {
  margin-left: 10px;
}
<div class="container" style="max-width: 400px; margin: 0 auto;">
  <h4 class="articleSubTitle">From the company A &amp; the company B</h4>
</div>

<div class="container">
  <h4 class="articleSubTitle">From the company A &amp; the company B</h4>
</div>

Answer №2

To resolve this issue, you can convert the element into a flexbox container:

.container {
  width: 70%;
  background: gray;
}

.articleSubTitle {
  font-family: 'Nunito', sans-serif;
  font-size: 1.3rem;
  color: #4d4d4d;
  display: flex; /*include this*/
  align-items:center; /*include this*/
  justify-content:center; /*include this*/
}

.articleSubTitle:before,
.articleSubTitle:after {
  content: '';
  display: inline-block;
  vertical-align: middle;
  width: 70px;
  height: 1px;
  background: #2f2f2f;
}

.articleSubTitle:before {
  margin-right: 10px;
}

.articleSubTitle:after {
  margin-left: 10px;
}
<div class="container">
  <h4 class="articleSubTitle center">From both company A and company B</h4>
</div>

Alternatively, you could utilize padding and use gradients to generate the lines:

.container {
  width: 70%;
  background: gray;
  text-align:center;
}

.articleSubTitle {
  font-family: 'Nunito', sans-serif;
  font-size: 1.3rem;
  color: #4d4d4d;
  padding:0 80px;
  margin:0;
  display:inline-block;
  background:
   linear-gradient(#2f2f2f,#2f2f2f) left center,
   linear-gradient(#2f2f2f,#2f2f2f) right center;
  background-size:70px 1px;
  background-repeat:no-repeat;
}
<div class="container">
  <h4 class="articleSubTitle center">From both company A and company B</h4>
</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

"An issue was found on line 75, with column 16 reporting an error stating: AttValue expected either a double or single quote

I can't seem to figure out what's wrong with the first line: <a xlink:href=“#dccomics” xlink:title=“DC Comics”> <rect x="1023.509" y="-612.968" fill="none" stroke="#000000" stroke-width="0.5" stroke-miterlimit="10" width ...

htmlcsssvg

I want to learn how to display the rupee symbol instead of the default dollar symbol in AngularJS for specific currency symbols

When using 'currency' in AngularJS, I noticed that a dollar symbol is displayed. How can I change this to show the required currency symbol based on different requirements? Currently, I am looking for information on how to display a rupee symbol ...

javascriptjqueryhtmlangularjs

Animation of CSS height when image/icon is hovered over

Having an issue with my icon when hovering. I am trying to change the img src on hover. Here is the code I currently have: #aks { width: 0px; max-height: 0; transition: max-height 0.15s ease-out; overflow: hidden; background: url("https://img. ...

htmlcsscss-animations

Enhance your Magento store with a personalized layout update

Is there a way to call a stylesheet from my skin folder instead of pointing to my base path? Right now I have <reference name="head"> <action method="addCss"> <stylesheet>yourtheme/css/red.css</stylesheet> < ...

phphtmlcssmagento

Controlling screen size in fullscreen mode for HTML5 videos: a guide to manipulation

Within my website, I have incorporated a <video> element nestled inside a <div>. This particular <div> serves the purpose of defining the video aspect ratio, allowing users to adjust it if necessary (for instances where the encoded video ...

csshtmlvideofullscreen

Are you in favor of side-to-side scrolling?

I can't quite recall where I've encountered this concept before, but I do know that there must be a method for creating a horizontal scroll. Imagine you have multiple DIVs in the following structure: <div class="container"> <div> ...

htmlcss

Ways to shift placeholder text slightly to the right within a select dropdown?

Struggling with this issue for hours, I can't seem to figure out how to: Adjust the position of the placeholder text (Search) by 10 pixels to the right in my select component Reduce the height of the field (maybe by 5px) without success. Could someo ...

javascriptcssangularsassangular-material

Enhancing the appearance of each letter within a word

I am currently working on styling the word "Siteripe". Each letter should have a different color, just like it is shown on this website. I have successfully styled only the first letter using the following CSS code: #namer:first-letter { color:#09C; f ...

csscss-selectors

What's the best way to fix a div to the bottom left corner of the screen?

I have explored various solutions regarding this issue, but none of them seem to meet my specific requirements. What I am trying to achieve is the correct positioning of a div as depicted in the green area in the image. The div located above the green div ...

htmlcssangularbootstrap-4bootstrap-5

Styling the background of a navigation menu specifically for mobile devices using CSS

Currently, my focus is on developing the website I am using Elementskit nav builder and I aim to change the background color of the navigation menu on mobile and tablet devices to black The existing code snippet is as follows: margin-top: 6px; } @med ...

htmlcssdrop-down-menu

Is it possible to customize the color of the placeholder and clear-icon in the ion-search bar without affecting

I am working with two ion-search bars and I need to customize the placeholder and clear icon color for just one of them. <ion-searchbar class="search-bar" placeholder="search"></ion-searchbar> My goal is to target a specific i ...

cssangulartypescriptionic2

Implementing a consistent CSS structure for various media sizes

Utilizing CSS grid and Sass, I implement varying grid layouts for different screen sizes (phone, tablet, desktop). However, on certain pages, I desire the same layouts at slightly larger or smaller screens than others. Is there a way to achieve this witho ...

cssresponsive-designcss-gridgrid-layout

Text-color in the v-tooltip

Is there a way to change the text color of v-tooltips components without affecting the tooltip background color? I attempted to inspect the element, but the tooltip only appears on hover, making it impossible to inspect. Below is the code snippet: < ...

cssvue.jsvuejs2vuetify.jsv-tooltip

Incorporating CSS styles into a dynamic JavaScript computation

I'm attempting to apply inline CSS to a JS calculation (e.g. 3*2*1) in order to make it appear red. I have experimented with using a span tag, but it only displays the calculation and not the result. I also tried utilizing an internal style sheet. Ho ...

javascriptcss

Center the div and make it position fixed

Is there a way to position a div in the center of the screen or its parent div, and have it fixed so that it does not shift when its width changes? I have a div containing a table, as shown below: https://i.sstatic.net/OVh2y.png I'm unsure if the oute ...

htmlcss

Troubleshooting Issue with Ionic's UI Router

Recently, I created a basic Ionic app to gain a better understanding of UI router functionality. To my surprise, when I ran the app, nothing appeared on the screen. Additionally, the developer tools in Google Chrome did not show any errors or information. ...

javascripthtmlangularjsionic-framework

Filtering a section of the HTML using Ajax and jQuery

Dealing with an Ajax call in jQuery that's delivering a lot of unexpected HTML content. I'm attempting to extract the specific part I need, but the console is showing an empty string. Can anyone provide guidance on resolving this issue? $.ajax({ ...

jqueryhtmlajax

Enhancing list item appearance by replacing bullets with Font Awesome icons

I need to create a list similar to this example Although I successfully replaced the bullet with a fontawesome icon, the result is not quite right as shown here You may notice a difference in spacing between the two. Here is my CSS code: .custom_list l ...

csshtmlfont-awesome

Sleek design featuring a header, footer, Left Menu, Content, and RightMenu implemented on Bootstrap 4-5

Can you help me create a minimal layout using Bootstrap 4-5 with a header, footer, LeftMenu, Content, and RightMenu? The combined width of LeftMenu, Content, and RightMenu should be similar to the main block on the current site (htmlforum.io). This means ...

htmlcssbootstrap-4bootstrap-5

What is the best way to center my form vertically within the form container?

I am having trouble aligning my form vertically. I've experimented with different methods such as using display: table-cell and vertical-align: middle property, but nothing seems to work. I want to maintain the current structure of the page and would ...

htmlcss