HTML after Pseudo-element not showing as intended - html

Question

* {
font-size: 14px;
box-sizing: border-box;
}
.wrapper {
padding: 2rem;
}
.text--bigtitle {
text-transform: uppercase;
font-size: 2rem;
}
.border--short {
position: relative;
}
.border--short::after {
content: "";
display: block;
position: absolute;
height: 2px;
width: 40%;
bottom: 0;
left: 50%;
color: red;
margin-left: -20%;
}
<div class="wrapper">
<p class="border--short text--bigtitle">Short Border</p>
</div>
I want to achieve a short bottom border instead of a full-width bottom border under a title using CSS and HTML.
I have tried using position:absolute to position the after element under the title text with the width desired. However, the bottom border is not showing at all. My code is as shown below:
Can anyone help me to solve this problem, thank heaps.

Answer 1

change color property to background-color property of .border--short::after. color property is used to change the font color of the text. background-color is used to change the background color. thanks
* {
font-size: 14px;
box-sizing: border-box;
}
.wrapper {
padding: 2rem;
}
.text--bigtitle {
text-transform: uppercase;
font-size: 2rem;
}
.border--short {
position: relative;
}
.border--short::after {
content: "";
display: block;
position: absolute;
height: 2px;
width: 40%;
bottom: 0;
left: 50%;
background-color: red;
margin-left: -20%;
}
<div class="wrapper">
<p class="border--short text--bigtitle">Short Border</p>
</div>

Answer 2

I hope this is how you need..
* {
font-size: 14px;
box-sizing: border-box;
}
.wrapper {
padding: 2rem;
}
.text--bigtitle {
text-transform: uppercase;
font-size: 2rem;
}
.border--short {
position: relative;
padding-bottom: 10px;
}
.border--short::after {
content: "";
display: block;
height: 2px;
width: 40%;
background-color: red;
}
<div class="wrapper">
<p class="border--short text--bigtitle">Short Border</p>
</div>

Answer 3

try this once it will work and if you don't want text center remove text-align: center form class .wrapper.
* {
font-size: 14px;
box-sizing: border-box;
}
.wrapper {
padding: 2rem;
text-align: center;
}
.text--bigtitle {
text-transform: uppercase;
font-size: 2rem;
position: relative;
display: inline-block;
}
.text--bigtitle::after {
content: "";
display: block;
height: 2px;
width: 40%;
background-color: red;
margin: auto;
}
<div class="wrapper">
<p class="text--bigtitle">Short Border</p>
</div>
Thank You...

Answer 4

* {
font-size: 14px;
box-sizing: border-box;
}
.wrapper {
padding: 2rem;
}
.text--bigtitle {
text-transform: uppercase;
font-size: 2rem;
}
.border--short {
position: relative;
display: inline-block;
}
.border--short::after {
content: "";
display: block;
position: absolute;
height: 2px;
width: 40%;
bottom: 0px;
left: 30%; /* 50 % minus half the width */
background-color: red;
}
<div class="wrapper">
<p class="border--short text--bigtitle">Short Border</p>
</div>