用$表示Bootstrap代码行

Question

我希望我的代码在命令行提示符之前加上'$'，但要使'$'不是可突出显示文本的一部分。

的index.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（我当时不知道它存在）这样做的方法（demo）：

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

复制并过去它，你不应该看到$。当然，这会使用您要定位的浏览器可能不支持的一些CSS。这称为content声明或CSS生成内容。 Here is a list它的支持。

此外，如果您对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;
}