CSS底部边框不应从左侧开始

Question

我有一个头衔。我需要边界底部。

如何解决？并且需要做

.newTitle {
  border-bottom: 1px solid orange;
}

<p class="newTitle">Stack Overflow</p>

Answer 1

在span标记内使用p，并将边框或类应用于该范围（默认情况下，内容为内联，因此只有内容/文本时才显示）

＆＃13;

＆＃13;

.newTitle {
  border-bottom: 1px solid orange;
}

＆＃13;

<p><span class="newTitle">Stack Overflow</span></p> 

＆＃13;

＆＃13;

＆＃13;

OP对我最初的回答发表评论之后的第二个解决方案：

将p-tag放入包装DIV并对其应用填充，如下例所示：

＆＃13;

＆＃13;

body,
html {
  margin: 0;
}

.wrap {
  background: #000;
  padding: 5px 20px;
}

.newTitle {
  color: #fff;
  border-bottom: 1px solid orange;
}

＆＃13;

<div class="wrap">
  <p class="newTitle">Stack Overflow</p>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

看起来你的p标签有一些填充。像填充左边的东西：50px左右。所以你可以做的是将paddinf-left改为margin-left。这会成功。继承人的代码

p{
margin-left:50px;
margin-right:50px;
}

.newTitle {
  border-bottom: 1px solid orange;
}

<p class="newTitle">Stack Overflow</p>

OR

使用text-dexoration而不是使用border-bottom。这似乎更正确，因为它专门用于强调你的文字。

.newTitle {

  text-decoration: underline;
  text-decoration-color: orange;
}

<p class="newTitle">Stack Overflow</p> 

Answer 3

那么下次你的解释应该会更好，但这就是我认为你想要的。

.container {
    width: 300px;
}
.newTitle {
    width: 80%;
    float: right;
    border-bottom: 2px solid orange;
    padding-bottom: 5px;
    margin-left: 20%;
}
h1 {
    padding: 0;
    margin: 0;
}

<div class="container">
    <div class="newTitle">
        <h1>Title</h1>
    </div>
</div>

Answer 4

使用:after获取所需结果，而无需添加html标记。

.newTitle {
  padding:20px;
  background:aqua;
}
.newTitle:after{
  content: " ";
  width:100%;
  border-bottom: 1px solid orange;
  display:block;
}

<p class="newTitle">Stack Overflow</p>