Creating parallel lines utilizing pseudo elements

Question

Creating parallel lines utilizing pseudo elements

Can someone assist me in drawing double lines under my paragraph using pseudo elements only without using display block? Here is my code snippet with display block:

p:after {
  content: "";
  display: block;
  width: 40px;
  margin: 20px auto 0;
  border-bottom: 1px solid;
  border-top: 1px solid;
  height: 7px;
}

<h1>The box-sizing Property</h1>
<p>Defines how the width and height of an element are calculated: should they include padding and borders, or not.</p>

<h2>box-sizing: content-box (default):</h2>
<p>Width and height only apply to the content of the element:</p>
<div id="example1">This div has a width of 300px. But the full width is 300px + 20px (left and right border) + 60px (left and right padding) = 380px!</div>

<h2>box-sizing: border-box:</h2>
<p>Width and height apply to all parts of the element: content, padding and borders:</p>
<div id="example2">Here, the full width is 300px, no matter what!</div>

Any help would be greatly appreciated.

css pseudo-element

Answer 1

Answer №1

To achieve the desired layout, apply the display: flex property to the p element.

p {
  display: flex;
  flex-direction: column;
}
p:after {
  content: "";
  width: 40px;
  margin: 20px auto 0;
  border-bottom: 1px solid black;
  border-top: 1px solid black;
  height: 7px;
}

<h1>The box-sizing Property</h1>
<p>Defines how the width and height of an element are calculated: should they include padding and borders, or not.</p>

<h2>box-sizing: content-box (default):</h2>
<p>Width and height only apply to the content of the element:</p>
<div id="example1">This div has a width of 300px. But the full width is 300px + 20px (left and right border) + 60px (left and right padding) = 380px!</div>

<h2>box-sizing: border-box:</h2>
<p>Width and height apply to all parts of the element: content, padding and borders:</p>
<div id="example2">Here, the full width is 300px, no matter what!</div>

Another option is to utilize the absolute/relative positions in conjunction with transform: translateX.

p {
  position: relative;
  padding-bottom: 20px;
}

p:after {
  content: "";
  width: 40px;
  border-bottom: 1px solid black;
  border-top: 1px solid black;
  height: 7px;
  position: absolute;
  left: 50%;
  bottom: -7px; 
  transform: translateX(-50%);
}

<h1>The box-sizing Property</h1>
<p>Defines how the width and height of an element are calculated: should they include padding and borders, or not.</p>

<h2>box-sizing: content-box (default):</h2>
<p>Width and height only apply to the content of the element:</p>
<div id="example1">This div has a width of 300px. But the full width is 300px + 20px (left and right border) + 60px (left and right padding) = 380px!</div>

<h2>box-sizing: border-box:</h2>
<p>Width and height apply to all parts of the element: content, padding and borders:</p>
<div id="example2">Here, the full width is 300px, no matter what!</div>

Answer 2

To achieve the desired layout, apply the display: flex property to the p element.

p {
  display: flex;
  flex-direction: column;
}
p:after {
  content: "";
  width: 40px;
  margin: 20px auto 0;
  border-bottom: 1px solid black;
  border-top: 1px solid black;
  height: 7px;
}

<h1>The box-sizing Property</h1>
<p>Defines how the width and height of an element are calculated: should they include padding and borders, or not.</p>

<h2>box-sizing: content-box (default):</h2>
<p>Width and height only apply to the content of the element:</p>
<div id="example1">This div has a width of 300px. But the full width is 300px + 20px (left and right border) + 60px (left and right padding) = 380px!</div>

<h2>box-sizing: border-box:</h2>
<p>Width and height apply to all parts of the element: content, padding and borders:</p>
<div id="example2">Here, the full width is 300px, no matter what!</div>

Another option is to utilize the absolute/relative positions in conjunction with transform: translateX.

p {
  position: relative;
  padding-bottom: 20px;
}

p:after {
  content: "";
  width: 40px;
  border-bottom: 1px solid black;
  border-top: 1px solid black;
  height: 7px;
  position: absolute;
  left: 50%;
  bottom: -7px; 
  transform: translateX(-50%);
}

<h1>The box-sizing Property</h1>
<p>Defines how the width and height of an element are calculated: should they include padding and borders, or not.</p>

<h2>box-sizing: content-box (default):</h2>
<p>Width and height only apply to the content of the element:</p>
<div id="example1">This div has a width of 300px. But the full width is 300px + 20px (left and right border) + 60px (left and right padding) = 380px!</div>

<h2>box-sizing: border-box:</h2>
<p>Width and height apply to all parts of the element: content, padding and borders:</p>
<div id="example2">Here, the full width is 300px, no matter what!</div>

Answer 3

Answer №2

If your styling is limited to display:block, consider using display:table as an alternative:

p:after {
  content: "";
  display:table;
  width: 40px;
  margin: 20px auto 0;
  border-bottom: 1px solid;
  border-top: 1px solid;
  height: 7px;
}

<h1>Exploring the box-sizing Property</h1>
<p>Determines how the size of an element is calculated, including padding and borders.</p>

<h2>box-sizing: content-box (default):</h2>
<p>Width and height apply only to the content of the element:</p>
<div id="example1">This div has a width of 300px. However, the total width is 300px + 20px (left and right border) + 60px (left and right padding) = 380px!</div>

<h2>box-sizing: border-box:</h2>
<p>Width and height apply to all parts of the element: content, padding, and borders:</p>
<div id="example2">In this case, the full width remains 300px, regardless of other factors!</div>

Alternatively, you can set it to inline-block with 100% width and use linear-gradient instead of borders to create the lines:

p:after {
  content: "";
  display:inline-block;
  width: 100%;
  margin: 20px auto 0;
  background:linear-gradient(to right,#000,#000) 50% 0%/40px 1px no-repeat,
             linear-gradient(to right,#000,#000) 50% 100%/40px 1px no-repeat;
  height: 9px;
}

<h1>The box-sizing Property</h1>
<p>Defines how the width and height of an element are calculated: should they include padding and borders, or not.</p>

<h2>box-sizing: content-box (default):</h2>
<p>Width and height only apply to the content of the element:</p>
<div id="example1">This div has a width of 300px. But the full width is 300px + 20px (left and right border) + 60px (left and right padding) = 380px!</div>

<h2>box-sizing: border-box:</h2>
<p>Width and height apply to all parts of the element: content, padding and borders:</p>
<div id="example2">Here, the full width is 300px, no matter what!</div>

Answer 4

If your styling is limited to display:block, consider using display:table as an alternative:

p:after {
  content: "";
  display:table;
  width: 40px;
  margin: 20px auto 0;
  border-bottom: 1px solid;
  border-top: 1px solid;
  height: 7px;
}

<h1>Exploring the box-sizing Property</h1>
<p>Determines how the size of an element is calculated, including padding and borders.</p>

<h2>box-sizing: content-box (default):</h2>
<p>Width and height apply only to the content of the element:</p>
<div id="example1">This div has a width of 300px. However, the total width is 300px + 20px (left and right border) + 60px (left and right padding) = 380px!</div>

<h2>box-sizing: border-box:</h2>
<p>Width and height apply to all parts of the element: content, padding, and borders:</p>
<div id="example2">In this case, the full width remains 300px, regardless of other factors!</div>

Alternatively, you can set it to inline-block with 100% width and use linear-gradient instead of borders to create the lines:

p:after {
  content: "";
  display:inline-block;
  width: 100%;
  margin: 20px auto 0;
  background:linear-gradient(to right,#000,#000) 50% 0%/40px 1px no-repeat,
             linear-gradient(to right,#000,#000) 50% 100%/40px 1px no-repeat;
  height: 9px;
}

<h1>The box-sizing Property</h1>
<p>Defines how the width and height of an element are calculated: should they include padding and borders, or not.</p>

<h2>box-sizing: content-box (default):</h2>
<p>Width and height only apply to the content of the element:</p>
<div id="example1">This div has a width of 300px. But the full width is 300px + 20px (left and right border) + 60px (left and right padding) = 380px!</div>

<h2>box-sizing: border-box:</h2>
<p>Width and height apply to all parts of the element: content, padding and borders:</p>
<div id="example2">Here, the full width is 300px, no matter what!</div>

Creating parallel lines utilizing pseudo elements

Answer №1

Answer №2

Similar questions

Can search engines understand and interpret CSS files?

How the logo's placement shifts while zooming out (using CSS and Angular 4+)

Intelligent programming and innovative thinking to streamline template diversity

Tips for adjusting image size using media queries

Guide to positioning elements in CSS

What adjustments can be made to alter the height of the borders on the left and right side of the block quote, and link the border to a different div element

Updating the hyperlink of an html element using css

Several components utilizing a popup module

Creating an HTML page that mimics the appearance of a PDF document across different screen sizes

Ensure that the content is perfectly aligned with the rest of the page for a visually pleasing

Closing the space between vertical edges of table data cells

Positioning the bottom of a two-column layout using CSS

Creating uniform-sized cards with CSS and Bootstrap

enhancing the functionality of appended children by including a toggle class list

Reasons for aligning inline elements with input boxes

"An issue arises with jqPlot axes and legend when exporting images, as they are not rendering

Tips for adjusting the color of a row when hovering

Enhancing user experience with CSS dropdown menu animations

Arrange the side by side display of uploaded image previews

Customize Cell Styling with Bootstrap Full Calendar CSS