他のHTML要素を追加せずにCssで線を描くことは可能ですか？

Question

私は描画線を求める質問をたくさん見てきましたが、HTML要素を追加していないものはありません。

のは、私は、このHTMLのdiv要素を持っているとしましょう：

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

追加

私はこのCSSを持っている：

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

さて、私のdivの背景には、私が垂直の点線をしたいのですがライン、それらの4つを言いましょう。上から下まで。別のHTML要素を追加せずに、追加のCSSでこれを描画することは可能ですか？

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

EDIT
私は、私は彼らがなりたいのラインを持っているために、マージン左またはそれのようなものを指定できるようにする必要があります。

Answer 1

擬似要素を::使用可能なマルチライン溶液前

.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>

フィドル

https://jsfiddle.net/Hastig/rjykLrog/1/（1×4ドットライン）

https://jsfiddle.net/Hastig/y7zp6aac/1/ （複数の4ドットl INES）

https://jsfiddle.net/Hastig/1qzf2drx（あなたがcontentに改行文字をエスケープし、その後、彼らは正しく表示しているように、preにwhite-spaceプロパティを設定することができます）

Answer 2

を直線勾配を繰り返します。例えばcontent: ".\A.\A.\A."; white-space: pre;

その後、ドット間の間隔を調整するためにline-heightを使用することができます。改行文字をエスケープオーバー明確化のために、この他の回答に

帽子の先端は：Newline character sequence in CSS 'content' property?

あなたはあなたがこれを使用することを計画しているのか詳しく説明けどcontentプロパティに追加何かがあることを心に留めてくださいていませんでしたスクリーンリーダーのためにHTML内の他のコンテンツと同様に扱われます。このようにドットを追加する際のアクセシビリティ上の懸念があるかもしれません。

.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>

Answer 3

は、私はあなたが尋ねたとして4本の縦線を入れてみてくださいました。また、私が完全に間違っているかどうか私に知らせてください。ありがとう。

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>