I want to add two lines below my p tag, But I want the lines to take 100% width of the container. How can I achieve this? I can't use hr tags, it should be done with CSS pseudo classes I guess.

CSS AND HTML CODE:

.test {
  max-width: 320px;
  width: 100%;
  border: 1px solid black;
}

<div class="test">
<p>Test</p>
</div>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

Add text-align:center to center your text. Use border-bottom instead of border to make your border appear only below.

Then use a :after element to generate the second border.

To make your element take 100% of its container, just remove the max-width. As its a div (which is a block-level element) it will automatically take 100% of its parent space if you dont tell it otherwise.

.test {
  width: 100%;
  border-bottom: 1px solid black;
  text-align: center;
}

.test:after {
  content: '';
  display: block;
  border-bottom: 1px solid black;
  margin-bottom: 4px;
}

<div class="test">
  <p>Test</p>
</div>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

.test {
  max-width: 320px;
  width: 100%;
  border-bottom: 4px double black;
}

<div class="test">
<p>Test</p>
</div>

<iframe name="sif3" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

Simply change property border to border-bottom and set the border style to double

.test {
  max-width: 320px;
  width: 100%;
  border-bottom: 6px double #444;
  text-align: center;
}

<div class="test">
<p>Test</p>
</div>

<iframe name="sif4" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

This is my approach. I hope is helpful to you. You have the flexibility to adjust the space between lines with margin-bottom: 2px;

.test {
  max-width: 320px;
  width: 100%;
  border-bottom: 1px solid black;  
  text-align:center;
}
.test p {
  border-bottom: 1px solid black;  
  margin-bottom: 2px;
}

<div class="test">
<p>Test</p>
</div>

<iframe name="sif5" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

the "border-bottom" style property can help to draw lines below an element. You can use below code :

.test {
  width: 100%;
  border-bottom: double;
  text-align: center;
}

<div class="test">
  <p>Test</p>
</div>

CodePudding user response：

You need to use ::before and ::after to achieve this style.

.test {
  max-width: 320px;
  width: 100%;
  text-align: center;
  position: relative;
}

.text {
  position: relative;
  width: 100%;
}

.text::before,
.text::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  height: 1px;
  width: 100%;
  background: #000;
}

.text::after {
  bottom: -5px;
}

<div class="test">
  <p class="text">Test</p>
</div>

<iframe name="sif6" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>