css下划线文本仅箭头居中答案

【问题标题】：css underline text only with arrow centeredcss下划线文本仅箭头居中
【发布时间】：2020-08-26 19:04:15
【问题描述】：

我正在尝试使用以 ligne 为中心的附加箭头来为我的文本添加下划线。这样做时，我无法在页面中居中文本。

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

&lt;h2 class="souligne" style="text-align:center;"&gt;THIS IS MY HEADER&lt;/h2&gt;

执行此操作时文本未居中。

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

所以当在 H2 中使用 style="text-align:center" 时，它不会使文本居中，它仅在使用 <center> 时才有效。

【问题讨论】：

找到了合适的解决方案。 stackoverflow.com/questions/45963746/…
寻求代码帮助的问题必须包含最短的代码以便在问题本身中包含重现它所必需的最好是Stack Snippet。见How to create a Minimal, Reproducible Example
感谢@Evgeny Veliky，这与我想要做的非常接近。
@Paulie_D 谢谢我看看

标签： css text underline

【解决方案1】：

您可以将 h2 设置为 inline-block，并将之前伪元素的位置更改为 50% se 负边距到箭头的一半，它将始终与标题长度居中

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;
}

&lt;h2&gt;The Header Is Here&lt;/h2&gt;

【讨论】：

检查我的代码并尝试在 jsfiddle 上重现，您所要做的就是设置 display:inline-block;在 h2 和 h2:before 将位置左更改为 50% 并添加 margin-left:-12px;
它不起作用，顺便说一句，我正在上课，我不想只修改 h2。 jsfiddle.net/0dqmjpch/1
实际上我不明白为什么使用时文本没有居中：style="text-align: center;"在 H2 中，例如：jsfiddle.net/aw9quod2 它仅适用于标签
.souligne { line-height: 17px;底部填充：15px；文本转换：大写；边框底部：2px 实心#00a7a8；位置：相对；显示：表格；左边距：自动；边距右：自动； } .souligne：之前 { 内容：'\25bc';位置：绝对；最高：100%；左：5em；颜色：#00a7a8； }
感谢@Renato Hoxha，这是有效的。但是我再一次无法在 H2 中添加文本对齐标签，以便选择是要居中还是将文本向左或向右推。无论如何，因为我想将文本居中，这对我来说是正确的答案。你应该把它作为一个答案。

【解决方案2】：

好的，基于@Renato Hoxha 的帮助，这就是我的项目最终奏效的方法。

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

&lt;h2 class="souligne"&gt;THIS IS MY HEADER&lt;/h2&gt;

【讨论】：