2

I've seen alot of questions asking for drawing lines, but none without adding another HTML element for it.

Let's say I have this HTML div element:

<div class="myDiv"></div>

Additional I have this CSS:

.myDiv{
  width: 100px;
  height: 100px;
  border: 2px solid black;
}

Now, in the background of my div, I'd like to have vertical dotted lines, let's say four of them. From top to bottom. Is it possible to draw this in additional CSS, without adding another HTML element?

FIDDLE
https://jsfiddle.net/yjs5yqwo/
https://jsfiddle.net/rjykLrog/2/

EDIT
I need to be able to specify margin-left or something like it, to have the lines where I want them to be.

dda
  • 6,030
  • 2
  • 25
  • 34
Björn C
  • 3,860
  • 10
  • 46
  • 85
  • Yes, you need to use " content:"" ". leave content blank and make it block e.i. display: block/inline-block. Plus the properties you used. I can do it you create one fiddle for test – Sarang Damkondwar Aug 23 '16 at 07:28
  • @SarangDamkondwar Fiddle created, please show me how to draw four dotted lines from top to bottom with some witdh between them.. – Björn C Aug 23 '16 at 07:33

3 Answers3

2

Possible multi-line solution using the pseudo element ::before

.myDiv {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  text-align: center;
  padding-left: 10px;
  width: 100px;
  height: 100px;
  border: 2px solid black;
  position: relative;
  font-size: 22px;
  font-weight: bold;
}

.myDiv::before {
  content: ".... .... .... .... ...."; /* your dots */
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0; /* stretches the before element over the entire surface of the main element */
  z-index: -1; /* places the ::before element underneath the main div content, as a background */
  letter-spacing: 6px;
  padding-left: 6px; /* letter-spacing adds px after letter, use padding at the beginning to off set it to remain centered. */
  font-size: 50px;
  color: hsla(0, 0%, 0%, 0.2);
  transform: rotate(-90deg); /* turns the .... sideways */
  margin-left: -38px;
  line-height: 22px;
}
<div class="myDiv">Four Ring</div>

fiddles

https://jsfiddle.net/Hastig/rjykLrog/1/ (1 x 4-dot line)

https://jsfiddle.net/Hastig/y7zp6aac/1/ (multiple 4-dot lines)

https://jsfiddle.net/Hastig/1qzf2drx (repeating linear gradient)

Hastig Zusammenstellen
  • 4,286
  • 3
  • 32
  • 45
2

You can escape line feed characters in the content and then set the white-space property to pre so that they're render properly. e.g. content: ".\A.\A.\A."; white-space: pre;

You can then use line-height to adjust the spacing between the dots.

Hat tip to this other answer for the clarification over escaping newline characters: Newline character sequence in CSS 'content' property?

You’ve not detailed what you’re planning to use this for but please bear in mind that anything added in the content property is treated like any other piece of content in the HTML for screenreaders. So there may be accessibility concerns in adding dots in this way.

.myDiv
{
  position: relative;
  box-sizing: border-box;
  width: 400px;
  height: 100px;
  padding: 15px 12px;
  border: 2px solid black;
  font-size: 22px;
  font-weight: bold;
}
.myDiv::before
{
  position: absolute;
  content: "........................\A........................\A........................\A........................";
  top: 0;
  left: 10px;
  line-height: 22px;
  white-space: pre;
  letter-spacing: 5px;
  color: hsla(0, 0%, 0%, 0.2);
}
<div class="myDiv">
  Something goes here
</div>
Community
  • 1
  • 1
JimUrban
  • 51
  • 6
  • If you want 7 dots instead of 4 in the same space then you would update the content to ".\A.\A.\A.\A.\A.\A." and reduce the line-height so that all 7 fit into the specified height. – JimUrban Aug 23 '16 at 11:37
  • No, i'd like additional lines.. four diffrent lines.. as in my question. – Björn C Aug 23 '16 at 12:06
  • I've updated the answer to demonstrate having multiple dots on each line. I had misinterpreted your question before and now I'm not really sure if this is a good answer for you. Some kind of repeating image is probably a better fit. – JimUrban Aug 23 '16 at 12:52
-1

I did try putting 4 vertical lines as you asked for. Also do let me know if I was completely wrong. Thanks.

CSS:

.myDiv{
 padding-left: 10px;
 width: 500px;
 height: 100px;
 border: 2px solid black;
 font-size: 22px;
 font-weight: bold;
 z-index: 1;
 overflow;
 position: absolute;
 top: 0;
 left: 0;
}

 .q { width: 100px;
 position: absolute;
 top:0;
 height: 100px;
 border-right: 2px dotted black;
 z-index: -1;}

 .w { width: 200px;
 height: 100px;
 z-index: -1;
 border-right: 2px dotted black;}

 .e { width: 300px;
 height: 100px;
 z-index: -1;
 border-right: 2px dotted black;}

 .r { width: 400px;
 height: 100px;
 z-index: -1;
 border-right: 2px dotted black;}

HTML:

 <div class="myDiv">ASJKLJKLS
   <div class="q">
     <div class="w">
       <div class="e">
         <div class="r">
         </div>
       </div>
     </div>
 </div>
Sazz
  • 119
  • 9