是否可以在不添加另一个 HTML 元素的情况下用 Css 画一条线？答案

【问题标题】：Is it possible to draw a line with Css without adding another HTML element?是否可以在不添加另一个 HTML 元素的情况下用 Css 画一条线？
【发布时间】：2016-08-23 07:24:54
【问题描述】：

我见过很多关于画线的问题，但没有添加另一个 HTML 元素。

假设我有这个 HTML div 元素：

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

另外我有这个 CSS：

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

现在，在我的 div 的背景中，我想要有垂直虚线，假设有四个。从上到下。是否可以在不添加其他 HTML 元素的情况下在额外的 CSS 中绘制它？

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

编辑
我需要能够指定 margin-left 或类似的东西，才能将线条放在我想要的位置。

【问题讨论】：

是的，您需要使用“内容：”“”。将内容留空并使其阻止 e.i.显示：块/内联块。加上你使用的属性。我可以做到你为测试创建一个小提琴
@SarangDamkondwar Fiddle 创建，请告诉我如何从上到下绘制四条虚线，它们之间有一些 witdh..

标签： html css

【解决方案1】：

使用伪元素 ::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;
}

&lt;div class="myDiv"&gt;Four Ring&lt;/div&gt;

小提琴

https://jsfiddle.net/Hastig/rjykLrog/1/（1 x 4 点线）

https://jsfiddle.net/Hastig/y7zp6aac/1/（多条 4 点线）

https://jsfiddle.net/Hastig/1qzf2drx（重复线性渐变）

【讨论】：

谢谢。它几乎可以工作。我不能使用display: flex 属性，所以我不能旋转这些点。 jsfiddle.net/rjykLrog/2
你可以使用线性背景，不确定它是否适用于圆圈，但我举个简单的例子..
重复线性渐变示例，jsfiddle.net/Hastig/1qzf2drx 我学习使用它们的 css 技巧文章链接自小提琴
如果你所说的圈子是指圈子内的圈子，请查看repeating-radial-gradient()
我错过了您的第一个回复，您不需要 flex 来旋转 ::before 容器（点）它是通过 transform: rotate(-90deg) 完成的，但无论哪种方式，我都想不出该怎么做多行或您想要的方式。

【解决方案2】：

您可以在content 中转义换行符，然后将white-space 属性设置为pre，以便正确呈现它们。例如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>

【讨论】：

如果您想要 7 个点而不是 4 个点在同一个空间中，那么您可以将内容更新为 ".\A.\A.\A.\A.\A.\A."并减少 line-height 以使所有 7 都适合指定的高度。
不，我想要额外的行......四个不同的行......就像我的问题一样。
我已经更新了答案以证明每行都有多个点。我之前误解了你的问题，现在我不确定这对你来说是否是一个好的答案。某种重复的图像可能更合适。

【解决方案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>

【讨论】：

您的解决方案不好，因为您确实添加了更多 HTML 元素。