다른 HTML 요소를 추가하지 않고 Css로 선을 그릴 수 있습니까?

Question

그리기 선을 묻는 질문을 많이 보았지만 다른 HTML 요소를 추가하지 않은 경우는 없습니다.

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

가 추가 나는이 CSS가 :

의 내가이 HTML div 요소가 있다고 가정 해 보자 내 사업부의 배경, 이제

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

을, 나는 점선 수직을하고 싶습니다 선, 네 가지 말을 해봅시다. 위에서 아래로. 다른 HTML 요소를 추가하지 않고 추가 CSS에서이를 그릴 수 있습니까?

뿐인
https://jsfiddle.net/yjs5yqwo/
https://jsfiddle.net/rjykLrog/2/

편집 나는 그들이 원하는 라인을 가지고, 여백 왼쪽 또는 같은 것을 지정 할 수 있어야합니다
.

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 아이 네스)

https://jsfiddle.net/Hastig/1qzf2drx

이 (

Answer 2

당신은 제대로 렌더링있어 너무 pre에 white-space 속성을 설정 한 후 content에서 줄 바꿈 문자를 탈출 할 수 있습니다) 선형 그라데이션을 반복. 예 : 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>