Jquery 文本字符串旁边的竖条

我正在尝试在文本字符串旁边创建一个垂直条，如下所示：

| String of text

这是我当前的代码

.line{
    position:absolute;
    width:10px;
    background-color: #FF0000;
    height:1em;
}

在我的HTML中：

<span class="line"></span>Past Projects<br />

其中，details是文本，line是边框，我将其更改为：

.line{
    border-style:solid;
    border-left: double-thick;
    border-color: #00ff00;
    margin-right: .5em;
    display:none;
}

你可以用

border-left: 1px solid;

---

使用不透明度而不是fadeIn：

.line {
    border-style:solid;
    border-left: double-thick;
    border-color: #00ff00;
    margin-right: .5em;
    opacity:0;
    -webkit-transition:all 1s ease;
}
.visible {
    opacity:1;
}

---

这里有一个

用于添加一个| before，您也可以这样做：

.line:before {
  content: "|";
}

---

当边界淡入淡出时，我将如何改变边界引起的位移？如果我使用id=“details”而不是class来调用它，为什么它会起作用？我目前使用fadein来调用它，但我用你的尝试过，它们在悬停时都有空间位移。

.line:before {
  content: "|";
}