css center arrow-aligned underline text

Trying to emphasize my text with an additional arrow centered on the line is proving to be a challenge. When attempting this, the text does not align in the center of the page.

.souligne {
  line-height: 17px;
  padding-bottom: 15px;
  text-transform: uppercase;
  border-bottom: 2px solid #00a7a8;
  position: relative;
  display: inline-block;
}

.souligne:before {
  content: '\25bc';
  position: absolute;
  top: 100%;
  left: 5em;
  color: #00a7a8;
}
<h2 class="souligne" style="text-align:center;">THIS IS MY HEADER</h2>

The issue arises with text alignment.

.souligne {
  line-height: 17px;
  padding-bottom: 15px;
  text-transform: uppercase;
  border-bottom: 2px solid #00a7a8;
  position: relative;
  display: inline-block;
}

.souligne:before {
  content: '\25bc';
  position: absolute;
  top: 100%;
  left: 5em;
  color: #00a7a8;
}
<h2 class="souligne" style="text-align:center">THIS IS MY HEADER</h2>

<br>

<center><h2 class="souligne">THIS IS MY HEADER</h2></center>

When using style="text-align:center" in H2, the text doesn't center properly - it only works within <center> tags.

csstextunderline

Answer №1

If you want to center the arrow icon with the title text, you can make h2 display as inline-block and adjust the position of the before pseudo-element by setting a negative margin equal to half of the arrow's size.

h2 {
line-height: 17px;
padding-bottom: 15px;
text-transform: uppercase;
border-bottom: 2px solid #00a7a8;
position: relative;
display:inline-block;
}
h2:before {
    content: '\25bc';
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left:-12px;
    color: #00a7a8;
}
<h2>The Header Is Here</h2>

Answer №2

After receiving assistance from @Renato Hoxha, I was able to successfully implement this code into my project.

.highlight {
color: #ea942f;
line-height: 17px;
padding-bottom: 15px;
text-transform: uppercase;
border-bottom: 2px solid #ea942f;
position: relative;
display: table;
margin-left: auto;
margin-right: auto;
}

.highlight:before {
content: '\25bc';
position: absolute;
top: 100%;
left: 50%;
color: #ea942f;
}
<h3 class="highlight">MY TITLE HERE</h3>

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

Achieve uniform display across browsers: Implement Chrome's overflow ellipsis feature on Firefox

I am seeking a CSS solution to achieve the same "overflow: hidden" and "text-overflow: ellipsis" behavior in Firefox as I get in Chrome. In Chrome, when the width of the tag is reduced, the text gets hidden and replaced with an ellipsis. However, in Firefo ...

htmlcssgoogle-chromefirefoxcross-browser

A full-width div containing a child span is unable to be aligned to the right

After reviewing this fiddle, I'm struggling to get my menu aligned correctly at the right edge of the overall "card". Despite trying various methods like margins, right: 0, and float, nothing seems to work as expected. In some cases, I even end up los ...

htmlcssalignment

Create a soft focus on the background sans any filters

I am in the process of developing a website and have implemented code to blur out the background: CSS #background{ background: url(img/bg.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o ...

javascriptjqueryhtmlcss

Refresh the data in a table upon clicking the menu

I am looking to develop an accordion MENU, but unsure if I should use divs or <ul>. When a submenu is clicked, I want to execute a mysql query to update the data in the table next to the menu. I'm not sure of the best approach and whether to uti ...

phphtmlcssajax

Steps for displaying a bootstrap modal in alignment with the triggering button's position

Recently diving into the world of bootstrap and AngularJs has been quite the learning experience for me. One challenge I encountered was trying to implement a bootstrap modal dialog box to show additional details within a table column. My goal was to hav ...

javascripthtmlcssangularjstwitter-bootstrap

IE7, IE6 display margins differently compared to other browsers

Can anyone help with an issue I'm having with a CSS ul list menu? #header-container #header ul.top-nav { float: left; margin: 20px 0 20px 10px; } #header-container #header ul.top-nav li { float: left; margin-right: 8px; border-rig ...

css

Display a single div and conceal the rest upon clicking a link

Trying to find a way to hide all other divs when clicking on a navbar link to toggle them. Currently, the divs stay active when a new link is clicked. The goal is for them to slide up and the clicked one to slide down. <script type="text/javascript> ...

jqueryhtmlcss

Is there a way to rotate a div without utilizing the "transform" CSS property?

I am currently utilizing a plugin from the SVG library to render graphics within a div (). However, I am encountering an issue when attempting to rotate it using the "transform" property. The rotation is purely visual and does not alter the X and Y axes of ...

javascripthtmlcsssvg

What is the best way to arrange my crimson blocks to sit next to each other?

Is there a way to align the red boxes side by side with some space in between them for separation, and how can I ensure that the signin/signup button appears against the blue background of the header? I attempted using float but encountered issues. The d ...

htmlcss

How to customize the hover and active properties of a checked checkbox in Vue 3 using Tailwind CSS and PUG?

It seems that checkboxes have a level of sophistication that I never anticipated, or perhaps my brain just can't quite grasp the nuances of checkboxes. After spending a significant amount of time researching and experimenting with checkboxes in a Vue ...

cssvue.jscheckboxpugtailwind-css

Steps for smoothly transitioning an element into a row and animating its neighboring elements to adjust their width using VueJS

Is there a way to smoothly slide-in an element in a row and have the other elements adjust their widths accordingly while maintaining their relative sizes? <div style="width: 100%; display: flex"> <div id="firstColumn" ...

cssvue.jscss-animationscss-transitions

Having difficulties adjusting the margin for a JSX element directly within the code

I'm struggling with giving a margin style inline to a JSX element. Here's the code snippet that I'm having trouble with: <Nunito20 style={{color: frenchGray, margin: 20 0 3 0;}}>Full Name</Nunito20> Unfortunately, this is throw ...

cssreactjs

Exciting animation in sidebar links text during toggle transition animation running

As the sidebar collapses, the text adjusts to its width in a choppy transition I'm seeking a way to display the text only when it fits perfectly within the sidebar without breaking into two lines I want the text to appear only after the collapse tra ...

javascripthtmlcsstwitter-bootstrapbootstrap-5

Struggling with aligning Bootstrap 5 navbar items to the right while keeping the brand on the left side?

I'm struggling to align the items to the right on my navbar. No matter what I try, they just won't budge from the left side next to my brand logo. Here's the code I'm working with: <nav class="navbar navbar-expand-lg navbar-dar ...

htmlcssnavbarbootstrap-5

Unable to define a range for the hr element using the nth-of-type selector

Why isn't the hr element from the 1st to the 3rd hour red as specified in the CSS code below? hr:nth-of-type(n+1):nth-of-type(-n+3){ background:red; } <!DOCTYPE html> <html> <head> </head> <body> <hr /> <p>T ...

htmlcss

The hover effect flickers in Firefox, but remains stable in Google Chrome

Here is an example link to check out: I am facing a dilemma on how to solve this issue and unsure if it is related to jQuery or the DOM structure. If you have any suggestions, they would be greatly appreciated. Thank you! ...

jquerycsshtml

Issue regarding the functionality of CSS styling when applied to a button

Trying to Style a Button with CSS div.myButton input a { display:block; height: 24px; width: 43px; padding:10px 10px 10px 7px; font: bold 13px sans-serif;; color:#333; background: url("hover.png") 0 0 no-repeat; text-decoration: none; } myButton a:hover { ...

htmlcss

Guide to positioning a link on the right side of a navigation bar

I am trying to achieve a specific layout using Bootstrap. I want to align the logout button to the right-hand side and have three modules (contact us, about epm, and modules) centered on the page. Can someone guide me on how to achieve this using Bootstr ...

htmlcsstwitter-bootstrap

Struggling to implement CSS for second div onto selected item in the first div

As a beginner in Angular, I am seeking some guidance and examples. In my code, there are two divs. One is created using ng-repeat with an ng-click function to detect the clicked item. The other div below has CSS properties like style="width:100px; float ...

javascripthtmlangularjscss

What is the best way to customize the endIcon of a styled-component button?

Presented here is a neatly styled button I've created import styled from 'styled-components'; import Button from '@material-ui/core/Button'; import ArrowForwardIosIcon from '@material-ui/icons/ArrowForwardIos'; const MyB ...

cssreactjsmaterial-uistyled-components