Display text, a dotted line then more text spanning the width of the page

by

Here is a solution to display a dotted line between 2 texts on one line.
It used the display: flex; property to align the dotted line and the texts on the left an right :

.wrap {
  display: flex;
}

.left {
  flex: 1;
  display: flex;
}

.left::after {
  content: '';
  border-bottom: 1px dotted;
  flex: 1;
  margin: 0 .5em;
}
<div class="wrap">
  <span class="left">Name :</span>
  <span class="right">Engineer</span>
</div>
<div class="wrap">
  <span class="left">Factory location :</span>
  <span class="right">(not invoice address)</span>
</div>

Previous answer with floats :

Output :

Responsive dotted line between text on the right and on the left

This solution floats both texts and the dotted bottom border expands to the remaining width. Here is the relevant code :

div {
  height: 1em;
}

.left,
.right {
  padding: 1px 0.5em;
  background: #fff;
  float: right;
}

.left {
  float: left;
  clear: both;
}

.dotted {
  border-bottom: 1px dotted grey;
  margin-bottom: 2px;
}
<div class="left">Name:</div>
<div class="right">Engineer</div>
<div class="dotted"></div>
<div class="left">Factory location:</div>
<div class="right">not invoice address</div>
<div class="dotted"></div>

More Related Contents:

  1. CSS Not Being Responsive
  2. When to use IMG vs. CSS background-image?
  3. Change select box option background color
  4. Li item on two lines. Second line has no margin
  5. When to use the !important property in CSS [duplicate]
  6. Add a background image (.png) to a SVG circle shape
  7. Two inline-block elements, each 50% wide, do not fit side by side in a single row
  8. How do I make an editable DIV look like a text field?
  9. Inline elements and line-height
  10. Tables instead of DIVs [duplicate]
  11. Is type=”text/css” necessary in a tag?
  12. Text overflow ellipsis on two lines
  13. Style input element to fill remaining width of its container
  14. ‘position: sticky’ not working when ‘height’ is defined
  15. Wrap text in tag
  16. How can I make a link from a table cell
  17. Flexbox column-reverse in Firefox, Edge and IE
  18. Make row stretch across all columns in CSS Grid
  19. Flexbox affects overflow-wrap behavior
  20. How does one use the onerror attribute of an img element
  21. Why does a filter gradient on a pseudo element not work in IE8?
  22. How can I make a TextArea 100% width without overflowing when padding is present in CSS?
  23. How do I remove the top margin in a web page?
  24. How can I make a 45 degree responsive ribbon with folded corner?
  25. Border with a transparent centred arrow
  26. Is text-indent: -9999px a bad technique for replacing text with images, and what are the alternatives?
  27. Radio buttons and label to display in same line
  28. Target IE9 Only via CSS [duplicate]
  29. Prevent floated divs from wrapping to new line
  30. How to get horizontal scroll bar in select box in IE?

Leave a Comment