How many dotted points I would make to fit them under the word in CSS

Question

I tried to make an under-line dotted under word to mark it as user provided information.

It is fine to use a pre-defined html under-line tag <u>..</u> with styling dotted or style border-bottom . However, it is a little bit problem with printing (the dotted not showing correctly); Therefore I decided to use dotted symbols ... instead because it is showing correct and precise.

By that way, I tried to make the word takes place of dotted points' spaces, and dotted point would stay a little bit lower from it current position under the word.

To make it clear, it would look like this:

My HTML Code do to this is like so:

 .dotted:before{ content: '..................'; position: absolute; top: 20px; } 

 <p>Name: <span class="dotted">Jonh David</span></p> 

However, as the information provided by user is varied, I cannot determined how many dotted points I would need to fit those information correctly.

Your tip is very much appreciated. Thanks.

Answer 1

Can use border-bottom-style css property

.dotted {
  border-bottom: 1px solid #000;
  border-bottom-style: dotted;
}

https://jsfiddle.net/j965444n/

Answer 2

I found this really cool site for doing this. Refer the site below.

You can play around with the properties and get the desired thickness and padding, also this is not dependent on setting the width based on the content size!

Check my below example of how this is done!

 .dotted { background-image: linear-gradient(to right, #000000 50%, transparent 50%); background-position: 0px 100%; background-repeat: repeat-x; background-size: 4px 2px; padding: 0px 3px; } 

 <p>Name: <span class="dotted">Jonh David</span></p> 

Answer 3

I think it's something like this:

#myDIV {
text-decoration: underline;
text-decoration-style:dotted;}

w3schools underline

Note : The text-decoration-style is only supported by Firefox.

Answer 4

If a simple dotted border isn't good enough for you and say you want to control the spacing between the dots - you could make your technique work by setting overflow:hidden on the parent element.

 .dotted { position: relative; overflow: hidden; display: inline-block; vertical-align: bottom; } .dotted:before { content: '...............................'; position: absolute; top: 4px; width: 100%; letter-spacing: 2px; /* adjust to control spacing between dots */ } 

 <p>Name: <span class="dotted">Jonh David</span></p> <p>Name: <span class="dotted">Jo</span></p> <p>Name: <span class="dotted">Jonh David blabla</span></p> 

Answer 5

I think @Christopher Marshall's idea is gonna make the same effect on printed page, so here is an example with background : https://codepen.io/Pauloscorps/pen/YrwWYo

HTML

<p>My name is : <span>John David</span></p>

CSS :

p {
  span {
    display:inline-block;
    font-weight:bold;
    &:after {
      content:"";
      display:block;
      width:100%;
      height:1px;
      background:red url('https://img11.hostingpics.net/pics/194508dot.jpg') repeat center bottom;;
    }
  }
}

Answer 6

I wonder what is the problem with underline or you could try border-bottom: 1px dotted #444 but whatever, here's your method - a span with dotted :pseudo - which takes into account the length of the element.

• content is a lot of … (use dots if you wish)
• it's cropped with overflow: hidden
• test cases with 2 very different lengths

3rd example is good ole dotted border (works since IE7)

 .dotted { position: relative; } .dotted:before{ content: '…………………………………………………………………………………………'; display: block; position: absolute; top: 3px; left: 0; right: 0; overflow: hidden; } .other-dots { border-bottom: 1px dotted black; } 

 <p>Name: <span class="dotted">Jonh David</span></p> <p>Name: <span class="dotted">Maria-Magdalena von Stroheim de la Peña</span></p> <p>Name: <span class="other-dots">Other way with bd-bottom</span></p>