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

Identify when a click occurs outside specific elements

I've been searching for solutions to address this issue, but so far nothing has worked. Here is the JavaScript code I am using: var specifiedElement = document.getElementById('a'); document.addEventListener('click', function(eve ...

javascripthtmlcss

Having no capability to manipulate CSS using jquery

In one of my divs, the CSS is set to have display: none .cookie_policy { color: white; text-align: justify; width: 50%; margin: 2% 25%; line-height: 20px; display: block; font-family: Arial,Helvetica,sans-serif; font-style: italic; display:none; } <div ...

jquerycss

Ways to prevent scrolling in Angular 6 when no content is available

I am developing an angular 6 application where I have scrollable divs containing: HTML: <button class="lefty paddle" id="left-button"> PREVIOUS </button> <div class="container"> <div class="inner" style="background:red">< ...

javascripthtmlcssangulartypescript

adjust the fixed div's width to match the percentage-defined width of its parent element

My goal is to make a div with the position: fixed property have the same width as its parent element, which is a td. However, I am having trouble achieving this. Here is my current code: HTML: <table style="width: 90%; border: 1px solid black;"> & ...

htmlcsswidthcss-positionsticky

What are some methods for applying border styles to the first and last row of a table using Material UI?

In my current project, I am utilizing the combination of Material UI and React Table. Recently, I was asked to implement an expandable row feature, which I successfully added. Once the user expands the row, we need to display additional table rows based on ...

cssreactjsmaterial-uireact-tablereact-table-v7

What is the best way to create an oval-shaped background for a div element?

Can someone help me achieve an oval shape for my index page div? I tried using border-radius but the edges are too round for my liking. I am looking for a more specific result See the CSS code below for reference <div class="home-page"></div> ...

htmlcss

The footer seems to be malfunctioning

Let's start with the code: CSS: *{ margin:0; padding:0; } body,html{ height:100%; } body{ background:url('../images/bg.png'); background-position:center; background-repeat:no-repeat; background-attachment:fixed; height:100%; ...

htmlcss

issue with arranging content in a two-column layout with headers

Currently working on my first website and running into some CSS issues. I'm aiming for a two-column + header layout that fills the entire screen space of the website. I have the following specifications in mind: Header takes up 20% of the screen he ...

htmlcss

Troubleshooting a CSS problem with iPad browsers

I have a specific issue related to CSS on iPad. I am working with a set of sublinks and have defined the styles in CSS as follows: #leftNav .searchBySub {...} #leftNav a.searchBySub:hover {...} #leftNav .searchBySubClicked {...} In my JavaScr ...

javascriptjquerycssipadmobile-safari

setting the width of <input> fields to automatically adjust

Curious about CSS. I was under the impression that setting width:auto for a display:block element would make it 'fill available space'. However, when applied to an <input> element, this doesn't seem to hold true. For instance: <b ...

css

Eliminating the use of <ul> <li> tag within the validation-summary-errors

I am facing an issue with a website where the error message is displaying in a specific format. <div class="validation-summary-errors"> <span>Password change was unsuccessful. Please correct the errors and try again.</span> <u ...

css

What might be the reason for jQuery not functioning in Internet Explorer 11?

Working on developing a slideout menu for my website using jQuery. It functions perfectly in Chrome, but encountering issues in Internet Explorer (IE11). Extensive search hasn't provided a solution yet. Seeking assistance and any help would be highly ...

javascriptjqueryhtmlcssplugins

Achieve full height Bootstrap styling by nesting it inside a row div

Is there a way to make the height of the left sidebar div equal to 100% within a row, based on the height of the right content? I have tried setting the height to 100%, but it doesn't seem to work. Any advice would be appreciated. <body> < ...

htmlcsstwitter-bootstrap

Enhance your CSS link in Yii framework 2.0 by incorporating media printing capabilities

While working on Yii framework 2.0, I typically include a CSS file by adding the following code snippet to assets/AppAsset.php: public $css = [ 'css/style.css', ]; Upon inspecting the element in the web browser, I notice the following code ...

cssattributesmediayii2

What is the best way to create CSS rules that can be dynamically applied as classes using JavaScript?

I have been attempting to use the addClass function in JavaScript to add a class, but I am struggling to make it work. Is there a specific way to define a class that will be added to an element when clicked on? Here is what I have attempted: var input = ...

javascriptjqueryhtmlcss

jQuery: Extracting text labels from checkboxes

My custom select dropdown includes checkboxes that are hidden until the user clicks on the dropdown: ---Select---- -option1- -option2- -option3- When a user clicks on the Select, the options appear as checkboxes. I want to be able to retrieve the labels ...

jqueryhtmlcsscheckbox

How can I trigger the appearance of the navigation bar when reaching the second div while scrolling

Is there a way to make the navigation bar appear only when a user has scrolled down to the second div on the page? The first div is the header. I am wondering how this can be achieved using jQuery? <!DOCTYPE html> <html> <head> <me ...

jqueryhtmlcssnav

Is it possible to position two fixed divs side by side?

I am currently in the process of building my online portfolio. I am looking to create two fixed divs that will not scroll, each occupying the full height of the page. The content between these two divs should be scrollable while the bars on the left and ri ...

htmlcsspositionfixed

What is the reason for the disappearance of unordered list bullets when using padding: 0?

Updating an older website that contains numerous unordered lists has presented a challenge. When the padding is set to 0, the display markers on the unordered list disappear. The root cause of this issue was traced back to the CSS setting *{padding: 0; ma ...

htmlcsshtml-lists

Establishing Fixed Positioning

I'm currently working on fixing the position of an image at the top of a mobile view page. .fixed { position: fixed; } This is specifically for use with Ionic. <div class="item item-image polygon"> <img src="http://urbanetradio ...

css