Add line on right and left of text

Question

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?

Not sure i understand the problem. Have you tried set span width to 100%; or maybe 25% is what you need? the p fill entire width minus 20px margin.. — A. Meshu, Jul 06 '19 at 19:30
from the duplicate: https://stackoverflow.com/a/29105358/8620333 — Temani Afif, Jul 06 '19 at 19:34

score 2 · Answer 1 · answered Jul 06 '19 at 19:39

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>

score 1 · Accepted Answer · answered Jul 06 '19 at 19:34

1

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>

answered Jul 06 '19 at 19:34

Rainbow

6,772
3
11
28

nowdays, you can relay on flex & psudos, not absolute position to avoid side effects and extra markup ;) – G-Cyrillus Jul 06 '19 at 19:39
well of course i'm not providing the ultimate solution here, but rather fixing the issue the op pointed out, also flex can screw you up, in some cases when there's overflow scrollbars don't show up and you lose data. – Rainbow Jul 06 '19 at 19:42
with flex and pseudos, lines appear when there is room. it will shrink down to 0 if the content fills up the whole space ;) . absolute take things off the flow, that's why it can screw up things in unexpected ways ;) – G-Cyrillus Jul 06 '19 at 19:43

Add line on right and left of text

2 Answers2