Add line on right and left of text [duplicate] - html

Question

This question already has answers here:
CSS technique for a horizontal line with words in the middle
(34 answers)
Closed 3 years ago.
I have the following HTML and CSS:
body {
text-align: center;
}
div {
border: 1px solid black;
margin: 0 auto;
width: 200px;
}
p {
border: 1px solid red;
line-height: 0.5;
margin: 20px;
text-align: center;
}
span {
display: inline-block;
position: relative;
}
span:before,
span:after {
content: "";
position: absolute;
height: 5px;
border-bottom: 1px solid black;
top: 0;
width: 100%;
}
span:before {
right: 100%;
margin-right: 20px;
}
span:after {
left: 100%;
margin-left: 20px;
}
<div>
<p class="strike"><span>Phrase</span></p>
</div>
I added a line on left and right of text but with 2 problems:
The line gets outside of the P border;
The P does not fill the entire width off the container DIV.
How can I solve these problems?

Answer 1

I've left your original CSS in but commented much of it out. FlexBox is a good way to achieve what you want (as opposed to position: absolute and position: relative:
/*body {
text-align: center;
}*/
div {
border: 1px solid black;
margin: 0 auto;
width: 200px;
}
p {
border: 1px solid red;
/*line-height: 0.5;*/
/*margin: 20px;*/
/*text-align: center;*/
}
span {
display: flex;
/*position: relative;*/
/*width: 100%;*/
align-items: center;
}
span:before,
span:after {
content: "";
/*position: absolute;*/
/*height: 5px;*/
border-bottom: 1px solid black;
/*top: 0;*/
width: 100%;
}
span:before {
/*right: 100%;*/
margin-right: 20px;
}
span:after {
/*left: 100%;*/
margin-left: 20px;
}
<div>
<p class="strike"><span>Phrase</span></p>
</div>

Answer 2

use left:0; and right:0 to make sure the lines stay within the borders
The margins you have on the p is what's stopping it from filling the entire width of the container.
Also the span is not really needed.
body {
text-align: center;
}
div {
border: 1px solid black;
margin: 0 auto;
width: 200px;
}
p {
border: 1px solid red;
line-height: 0.5;
/* margin: 20px; to span full width*/
text-align: center;
position: relative;
}
p:before,
p:after {
content: "";
position: absolute;
height: 1px;
background:black;
top: 50%;
transform:translateY(-50%);
width: 20%;
}
p:before {
left: 0;
}
p:after {
right: 0;
}
<div>
<p class="strike">Phrase</p>
</div>