javascript - 如何使用给定链接中的 css 代码创建垂直线？

Question

这是关于 stackoverflow 的另一个问题的链接。

Css code to create horizontal line

我喜欢这条线。 这是我在网站上用于水平线的代码:

hr.fancy-line { 
    border: 0; 
    height: 5px;

}
hr.fancy-line:before {
    top: -0.5em;
    height: 1em;
}
hr.fancy-line:after {
    content:'';
    height: 0.5em;
    top: 1px;
}

hr.fancy-line:before, hr.fancy-line:after {
    content: '';
    position: absolute;
    width: 100%;
}

hr.fancy-line, hr.fancy-line:before {
    background: radial-gradient(ellipse at center, rgba(0,0,0,0.1) 0%,rgba(0,0,0,0) 75%);
}

body, hr.fancy-line:after {
    background: #f4f4f4;
}

-Some Text-
<hr class="fancy-line"></hr>

现在我想知道:如何修改这段代码以便能够创建垂直线。这是我使用上面的代码创建水平线的链接:Horizontal lines used

Answer 1

我为元素设置了窄宽度和高高度的样式。

但是，用 <hr> 制作一条垂直线似乎是非语义的，所以你可能想使用 <span>或其他一些元素。

body {
  background: #f4f4f4;
}
hr.fancy-line {
  border: 0;
  height: 180px;
  width: 5px;
  margin: 0 auto;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0) 75%);
}

<hr class="fancy-line"></hr>

---

您实现线条的方式取决于您使用它们的上下文。例如，如果线条将分隔页面上的元素，您可能希望将它们创建为伪元素，如下所示:

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
ul li {
  position: relative;
  display: inline-block;
  width: 180px;
  height: 180px;
  background-color: #CCC;
}
ul li:not(:last-child) {
  margin: 0 1em 0 0;
}
ul li:not(:last-child):after {
  content: "";
  position: absolute;
  left: 100%;
  margin-left: .5em;
  height: 100%;
  width: 4px;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0) 75%);
}

<ul>
  <li></li>
  <li></li>
  <li></li>
</ul>