css underline text only with arrow centered

Question

i'm trying to underline my text with an additional arrow centered on the ligne. when doing this i can't center my text in 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 text is not centered when doing this.

.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>

so when using style="text-align:center" in H2 it doesn't center the text, it works only when using <center>.

Found a suitable solution. https://stackoverflow.com/questions/45963746/resize-bottom-border-on-a-heading-element-to-fit-the-text-width-and-also-be-resp — Evgeny Veliky, May 11 '20 at 09:28
Questions seeking code help must include the **shortest code** necessary to reproduce it **in the question itself** preferably in a [**Stack Snippet**](https://blog.stackoverflow.com/2014/09/introducing-runnable-javascript-css-and-html-code-snippets/). See [**How to create a Minimal, Reproducible Example**](http://stackoverflow.com/help/reprex) — Paulie_D, May 11 '20 at 09:47
Thanks @Evgeny Veliky this is very close to what i'm trying to do. — cetipabo, May 11 '20 at 11:07

score 0 · Answer 1 · answered May 11 '20 at 09:41

0

You can set h2 to inline-block, and change position of before pseudo-element to 50% se negative margin to half of the arrow and it will be always center fit with title length

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>

answered May 11 '20 at 09:41

Renato Hoxha

132
5

check my code and try to reproduce on jsfiddle, all you have to do is to set display:inline-block; on h2 and at h2:before change position left to 50% and add margin-left:-12px; – Renato Hoxha May 11 '20 at 09:47
it doesn't work look, btw i'm doing a class, i don't want to modify h2 only. http://jsfiddle.net/0dqmjpch/1/ – cetipabo May 11 '20 at 09:51
actualy i don't understand why the text is not centered when using : style="text-align: center;" in H2, example here : http://jsfiddle.net/aw9quod2/ it works only with tag – cetipabo May 11 '20 at 10:19
1

.souligne { line-height: 17px; padding-bottom: 15px; text-transform: uppercase; border-bottom: 2px solid #00a7a8; position: relative; display: table; margin-left:auto; margin-right:auto; } .souligne:before { content: '\25bc'; position: absolute; top: 100%; left: 5em; color: #00a7a8; } – Renato Hoxha May 11 '20 at 10:22
Thanks @Renato Hoxha this is working. But once again i can't add a text-align tag in H2 in order to choose if i want to center it or push the text to left or right. Anyway as i wanted to center my text, this is the correct answer for me. You should make it an answer. – cetipabo May 11 '20 at 10:58

score 0 · Answer 2 · answered May 11 '20 at 11:52

OK so based on the @Renato Hoxha help, this is what finaly worked for my project.

.souligne {
 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;
}

.souligne:before {
 content: '\25bc';
 position: absolute;
 top: 100%;
 left: 50%;
 color: #ea942f;
}

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

css underline text only with arrow centered

2 Answers2