css - 在 Bootstrap 代码行之前加上 $

Question

我希望我的代码前面有一个“$”，就像命令行提示符一样，但让那个“$”不是可突出显示的文本的一部分。

索引.html

<pre class="pre-scrollable">  
    <span class="com">git clone https://github.com/vccabral/vagrant-django-template-1.git</span>  
    <span class="com">cd vagrant-django-template-1</span>  
    <span class="com">vagrant up</span>  
    <span class="com">vagrant ssh</span>  
    <span class="com">python -c "import this"</span>  
</pre>  

Answer 1

这是一个CSS 2.1（当时我不知道它存在）方法（演示）：

.com::before {
  content: "$";
  display: inline;
}

复制并粘贴它，你不应该看到$. 当然，这使用了一些您所定位的浏览器可能不支持的 CSS。这称为content声明或 CSS 生成的内容。 这是它的支持列表。

此外，如果您对 html 进行轻微更改，您可以添加一个闪烁的光标；）

<pre class="pre-scrollable">  
    <span class="com">git clone https://github.com/vccabral/vagrant-django-template-1.git</span>  
    <span class="com">cd vagrant-django-template-1</span>  
    <span class="com">vagrant up</span>  
    <span class="com">vagrant ssh</span>  
    <span class="com last">python -c "import this"</span>  
</pre>

.com::before {
    content: "$";
    display: inline;
}

.com.last::after {
    content: "_";
    display: inline;
    text-decoration:blink;
}